vue-component 相关问题

在 Vue 中是否可以使用自定义指令或渲染函数以编程方式通过转换包装元素或组件？

为了使我和我的设计师的代码更加简单/干净，我希望能够执行如下操作。是否有可能 - 使用自定义指令或渲染函数通过简单的

Vue 组件：如何将数据从父级传递给子级

我如何从我的医生组件访问医生属性？ Vue.component('专家', { 模板：` &r... 如何从我的医生组件访问医生属性？ Vue.component('specialists', { template: ` <div> <div class="list-group-item title"> &raquo; {{ name }} </div> <doctor class="list-group-item" v-for="doctor in doctors"> <a href="#" class="list-group-item-heading"> {{ doctor.full_name }} </a> </doctor> </div> `, props: { name: { default: '', }, }, data: function() { return { algoliaClient: null, algoliaIndex: null, doctors: [], }; }, created: function() { this.algoliaClient = this.$parent.algoliaClient; this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors'); }, mounted: function() { this.getDoctors(); }, methods: { getDoctors: function() { this.search(this.name); }, search: function(input) { var _this = this; this.algoliaIndex.search(this.name, function(err, hits) { _this.setDoctors(hits.hits); }); }, setDoctors: function(data) { this.doctors = data; }, }, }); // my doctor component Vue.component('doctor', { template: ` <div><slot></slot></div> `, data: function() { return { doctor: null, // here. how can i pass value to it? }; }, }); 如何从我的专家组件访问医生属性？ 我尝试从专家组件访问 this.$children 但孩子为空 sdfqsdfqsd qsdf qsdfqsdfqsdfqsdfqsdfqs qsdfqsdf

Vue v-for 强制特定项目每次都重新渲染

使用 Vue v-for 指令时，我应该在 :key atrribute 中写什么来强制某些项目在列表更新时始终重新渲染？ 当然，我可以在外部使用简单的整数计数器并递增......

如何在vue生命周期钩子中使用vuex使用async/await？

当我在 Mounted() 生命周期挂钩中的 App.vue 组件中分派一个操作时，它会在其他组件加载后运行。我在操作中使用 async/await 并安装了生命周期挂钩。 应用程序.vue 文件 方法...

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。你可以做到的。