vue-component 相关问题

Vue-draggable-next：增加空列表的检测范围

我正在使用 Vue-draggable-next 和 Vue 3 来实现可拖动列表。我的应用程序有时要求用户将其他列表中的项目拖到最初为空的列表中。我发现拖...

Vue 在导航后使 p5 组件保持活动状态

我使用 vue 和 p5 构建了一个创意编码网站。在我的应用程序中，我根据当前路线显示不同的 p5 组件。问题是 vue 或 p5（idk 哪个）以某种方式保持组合...

在Vue.JS中，如何将props值传递和更改到嵌套组件中？

我的要求非常基本且简单，但不知道为什么 ChatGPT 一直给我带有警告消息的答案。 我正在使用 Vue 2。 我有三个嵌套组件：GrandParentComponent，

如何使用 Vue 3 Composition API 调用槽中组件公开的方法

插槽（父组件中）中有一些组件（子组件），我想调用它们的方法。我尝试了以下步骤： 使用 useSl 将子组件作为对象检索...

组件道具一直说它未定义

我有一个名为“item”的组件，它看起来像： 我有一个名为“item”的组件，它看起来像： <template> <div class="flex flex-row p-1" x-property="{{item.property}}" x-type="{{item.type}}" x-misc="{{item.misc}}"> <span class="w-1/5">{{ item.property }}</span> <span class="w-1/5">{{ item.type }}</span> <span class="w-2/5">{{ item.misc }}</span> <div class="w-1/5 flex justify-end"> <button type="button" class="relative rounded-fullt text-cyan-500 focus:outline-none ml-1"> <PencilIcon class="h-6 w-6"></PencilIcon> </button> <button type="button" class="relative rounded-fullt text-cyan-500 focus:outline-none ml-1"> <TrashIcon class="h-6 w-6"></TrashIcon> </button> </div> </div> </template> <script setup lang="ts"> import { TrashIcon, PencilIcon } from "@heroicons/vue/24/outline"; const props = defineProps<{ item: typeof ModalResult }>(); console.log(props); </script> 它是这样使用的 <component v-for="item in items" :is="item.type == 'object' ? ObjectItem : item.type == 'list' ? List : Item" :item="item"></component> 它一直给我错误：item.vue:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'property') 我觉得我已经尝试了一切，但它一直给我这个错误。 试一下使用监听器监听item，然后在子组件中定一个字段去接收，然后在重新渲染

Watcher 无法检测对象数组发生的更改

我正在使用带有选项 api 的 vue3，如标题为代码的部分所示。我将一个对象设置为商店。 storeTest.vue 显示了 Store 的实现方式，并在 watch 中显示了我如何监听更改

Vue 错误：需要布尔值，但收到 True/False 字符串

我尝试仅在值为 true 时渲染组件，但是我收到以下错误： Vue warn]：无效的道具：道具“可选择”的类型检查失败。预期布尔值...

为什么我的手表不显示储值变化？

我正在使用带有选项 api 的 vue3，如标题为代码的部分所示。我将一个对象设置为商店。 storeTest.vue 展示了 `tore 是如何实现的，在 watch 中它展示了我如何监听变化

如何通过商店发送对象数组

我正在使用 vue3 和 options api 如标题为代码的部分所示，我将一个对象设置为商店。在 storeTest.vue 部分中它显示了商店是如何实现的，在 watch 中它显示了我如何听

迭代中的元素期望有“v-bind:key”

如下面发布的代码所示，我想添加一个下拉列表。但 Visual Studio 代码用红色强调了 v-for 并生成以下错误： 迭代中的元素期望有 'v-bin...

Vue 组件 - 为深度注入的 HTML 内容动态创建样式

我们拥有用户使用文本编辑器创建的内容，该编辑器为他们创建 HTML 标签，例如 h1 p 等。 我们还让用户通过预定义的表单定义主题，该表单基本上设置了样式......

Vuetify v-sparkline 组件未渲染

我想知道我是否可以获得组件中迷你图的一些帮助，因为我对此还很陌生。 现在，我只想显示一个具有默认设置的图表和一个 num 数组...

两个单选按钮，如何选择其中一个取消选择另一个

在下面 vue-component 部分提到的代码中，我创建了一个带有两个单选按钮的组件。 我想要实现的是，当 idRadioBtnShowGeoTIFFOverlayContainer 中的单选按钮被选择时...

我应该使用 mixins 还是实用程序类？

我有一个 Vue.js 项目，在多个文件中使用一种方法，因此我创建一个实用程序类来在那里编写此方法，如下所示： 导出类 Util{ 做一点事（）{ 返回“某物” ...

Vue 3 中的字符串输入数组？

我正在尝试使用 Vue 3 呈现一个表单，其中包含文本输入字段的列表。这些字段映射到具有固定长度的 string[]。我希望能够将每个字段的 v 模型设置为

如何在primevue中添加跳转到活动选项卡的按钮

跳转到活动选项卡 <template> <div> <Button @click="jumpToActiveTab">Jump to Active Tab</Button> <TabView :scrollable="true" previousIcon: { class: 'text-indigo-900 w-8'}> <TabPanel v-for="(a, index) in filteredTabledata" :key="index"> <template #header> <span :class= "[index == activeIndexVal ? 'text-white font-black' : 'text-white font- medium']" @click="getDataId(a['_id'], a['Status'])">{{a.Account_id }} </span> </template> </TabView> </div> </template> import TabPanel from 'primevue/tabpanel'; import TabView from 'primevue/tabview'; export default { components: { TabView, TabPanel }, data() { tabledata: [], }, computed:{ filteredTabledata() { return this.tabledata.filter(item => String(item.Account_id).startsWith(this.searchQuery)); } }, methods:{ getData(){ axios.get('url').then({ this.tableData = res.data }) }, jumpToActiveTab(){ console.log('jump to active tab') } } </script> 我使用primevue tabview，我想在跳转到活动选项卡按钮中实现登录。 如果用户单击该按钮，它应该将用户带到活动标签页 如果用户位于最后一页，但活动选项卡位于第一页，则意味着单击后必须移动到第一页，而无需使用上一页或下一页按钮导航。 请参阅 PrimeVue 文档 如果你学过Vue，不到2分钟就可以搞定。 <TabView v-model:active-index='targetIndex'> 然后将 targetIndex 添加到 data()。 现在 this.targetIndex 是活动选项卡的索引。它是反应性的，因此设置 this.targetIndex 将更改 UI。你可以做到的。

Nuxt vue 基于参数/类型的显示组件

我对 Nuxt 和 Vuejs 相当陌生。我已经被困在这个问题上几天了，并且已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件的页面 我对 Nuxt 和 Vuejs 相当陌生。我已经被这个问题困扰了几天了，已经在谷歌上搜索了解决方案，但还没有找到任何.. 我有一个带有组件<VTextField></VTextField>和<VSwitch></VSwitch>的页面，页面的示例代码如下 <script setup lang="ts"> import { ref } from 'vue'; </script> <template> <VTextField></VTextField> <VSwitch></VSwitch> </template> 但是，我没有直接使用组件，而是需要遵循一个要求，即我有一个 API 可以为我提供“类型”，并根据“类型”值显示组件。 我尝试为此创建一个函数，代码如下。 utils/RenderComponent.ts import { defineComponent } from 'vue'; import { VTextField } from 'vuetify/components'; import { VSwitch } from 'vuetify/components'; export function renderComponent(type: any) { switch (type) { case 'Text': return defineComponent({ components: { VTextField }, template: '<VTextField/>' }); case 'switch': return defineComponent({ components: { VSwitch }, template: '<VSwitch/>' }); default: throw new Error('Invalid component type'); } } 页面.vue <script setup lang="ts"> import { ref } from 'vue'; import { renderComponent } from '~/utils/RenderComponent'; </script> <template> <component :is="renderComponent('Text')" /> <component :is="renderComponent('Switch')" /> </template> 但是代码不起作用。我希望有人能提供帮助并提前谢谢您！ 您可以直接在模板中使用条件 <script setup lang="ts"> import { ref } from 'vue'; const componentType = ref('switch') </script> <template> <VTextField v-if="componentType === 'switch"></VTextField> <VSwitch v-else-if="componentType === 'textfield'"></VSwitch> .... </template>

有没有办法将组件（同时设置其属性）v-bind 作为另一个组件的属性，如下所示

这就是我想要实现的目标。我想提供 MyParentComponent 一个子组件作为项目...

事件错误：TypeError：无法读取未定义的属性（读取“stopPropagation”）

将点击事件从子组件传递到父组件时，我无法使用点击修饰符。有谁知道我在这里可能做错了什么？ 我有一个这样的组件：

处理 Vue 组件中的事件 Vue3

将点击事件从子组件传递到父组件时，我无法使用点击修饰符。有谁知道我在这里可能做错了什么？ 我有一个这样的组件：