标签: vue-composition-api

我对 vue 很陌生。我想做的是在等待端点返回时加载 gif。

我正在尝试使用 watchEffect，但我无法弄清楚。如果这是正确的方法我该怎么做？如果不是我应该用什么代替？

谢谢

编辑：代码

<template>
    <div class="player-list" :key="playerList.id" v-for="playerList in players.playerLists">
        <PlayerList :playerList="playerList" />
    </div>
</template>

<script>
import getPlayers from "@/composables/getPlayers";
import PlayerList from "@/components/PlayerList";
import { watchEffect } from 'vue';

export default {
    name: 'PlayerLists',
    components: {
        PlayerList
    },
    setup() {

        const { players, error, load } = getPlayers() //request endpoint
        load()

        watchEffect(() => {
            console.log('watch effect function')
        })

        return { players, error }
    }
}
</script>

我正在尝试在本地使用 CKEditor 和 vue 3 组合 api，但此处页面上未显示的编辑器可能是组件

<template>
    <PageWrapper title="Post">
        <CKEditor :editor="editor"></CKEditor>
    </PageWrapper>
</template>


<script setup>
import PageWrapper from '@/components/PageWrapper.vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editor = ClassicEditor
</script>

怎么了？

我怎样才能在这个 vue 组件中定位带有类的元素test：

<template>
  <div id="test" class="test">

  </div>
</template>


<script setup>

console.log(document.querySelector('.test'))
</script>

该组件被导入到另一个组件中。控制台输出null.

嗨，我坚持使用类星体对话框处理事件。首先，我有一个对话框组件（对于 cookie，用户可以单击两个按钮 - 一个用于接受 cookie，一个用于显示更多）。\n当用户单击“显示更多”时，它应该打开下一个对话框，其中包含一些基本文本和几个按钮（即对于这个问题并不重要）。

所以第一个对话框是父对话框，第二个对话框是子对话框。我尝试在父级中创建引用（isOpen = true）并将其发送给子级。问题是道具是只读的，当我单击对话框外部的屏幕时，我收到了有关它的警告。这是因为有隐藏对话框的本机操作（我需要此操作保持工作状态）所以我可以\xc2\xb4t这样做：/

我真的在这件事上停留了很长时间，所以感谢您的帮助：/

家长

<template>\n  <q-dialog :model-value='props.showCookies' position='bottom' persistent>\n    <q-card style='max-width: 1920px; width:100%; background-color: rgba(77,80,83,0.9490196078431372 )'>\n      <q-card-section>\n        <div>\n           ....\n          <div class='flex' style='justify-content: right'>\n            <!-- This is the button to open dialog-->\n            <q-btn rounded color='grey-5' label='Zjistit v\xc3\xadce' class='cookie-button q-mr-sm' @click='showMore' />\n            <q-btn rounded color='grey-5' label='Povolit v\xc5\xa1e' class='cookie-button' @click='acceptCookies' />\n          </div>\n        </div>\n      </q-card-section>\n    </q-card>\n  </q-dialog>\n  <CookiesDialogWhichWeUse :isOpen='isOpenCookieSettingsWhichWeUse' />\n</template>\n\n<script lang='ts'>\nimport { SetupContext, ref } from 'vue';\nimport CookiesDialogWhichWeUse from '@/components/Cookies/CookiesDialogWhichWeUse.vue';\n\nexport default {\n  name: 'CookiesModal',\n …

我有一个接收一些道具并发出自定义事件的组件。我需要发出来将 props 的值作为参数传递。无论我做什么，我总是收到一个代理而不是原始值。这是我的实现的简化：

    //child-component
    <script setup lang="ts">
        import { ref, unref } from "vue";

        const props = defineProps<{
             category: { id: number, label: string};
        }>();

        const emit = defineEmits(["sendcategory"]);
        const category = ref(props.category);
        const cat = unref(category);

        function send() {
            emit("sendcategory", cat);
       
    }
    <template>
       <div  @click="send" >
            {{ category.value.label }}
       </div>
    </template>

这是父组件的示例

    //parent-component
    <script setup lang="ts">

        import { ref } from "vue";
        import ChildComponent from "./ChildComponent.vue";

        const item = { id: 1, label: "testlabel" }

        function getcategory(category: {id: number, …

最近学习了vuejs，似乎在完全掌握ref和reactive的使用本质区别上遇到了问题。什么时候适合使用 ref 或reactive？

我有一个组件列表，我想从外部为它们设置一个配置，

例如：

 const myConfig = [
  {
    name: 'example',
    renderer: () => (<button @click="clickHanlder">Click me!</button>)
  },
  ...
 ];

对于我的组件，我想使用myConfig如下所示：

  <template>
    <div class="example">
      <template v-for="(item, index) in myConfig" :key="index">
        My Button:
        <div class="example-2">{{ item.renderer() }}</div>
      </template>
    </div>
  </template>

请注意，我不想使用slots

我怎样才能做到呢？

<script lang="ts" setup>   
  interface Props {
    bigArray: string[];
  }
        
  ***const props = withDefaults(defineProps<Props>(), {
    bigArray:[],
  }*** <---- Here is the error, setting props
        
  const bigArray = ref(props.BigArray);
</script>

ITsInterface.ts

BigArray?: string[] | null;

在这种情况下寻找将空数组设置为 prop 的正确方法：

• Vue.js3
• 组合API
• 打字稿
• 在脚本标签中设置

下面是标题和正文（不同组件）的代码。当你在组件1内部时，如何使用组合API方式调用组件2的继续函数并传递参数......

第 2 部分：

export default {
    setup() {
        const continue = (parameter1) => {
            // do stuff here
        }
        
        return {
            continue
        }
    }
}

我尝试根据 props 值计算一个值，如下所示：

interface Props {
  task: Task;
}

const totalPrice = computed(() => {
  return task.paymentDetail.products
    .map(p => p.amount)
    .reduce((partialSum, acc) => partialSum + acc, 0);
})

然后在我的模板中，我显示计算值，totalPrice如下所示：{{ totalPrice }}。

我的计算从来不是计算，如果我在里面添加一个console.log，我永远不会输入它。

如何根据 props 计算值？