大佬教程收集整理的这篇文章主要介绍了为什么Vue渲染组件不正确？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
下面是一个错误示例。
重现问题：添加 3 个项目并删除第二个。
里面的所有东西都被正确删除了。这可以从下面的文字渲染中看出。但是组件显示不正确。为什么？这是一个错误吗？
我尝试使用附加属性进行条件渲染，尝试覆盖对元素数组和数组内部的引用 - 没有结果。
@H_607_14@Vue.component('SELEcted-material',{ props: [ 'value' ],template: ` <div> <v-autocomplete v-model="local" :items="materials" item-text="name" return-object autocomplete="new-password" @change="input" /> </div> `,data() { return { local: this.value,materials: [{ ID: 1,name: 'mat-1',q: 1 },{ ID: 2,name: 'mat-2',],}; },methods: { input() { this.$emit('input',this.local); },},}) Vue.component('add-board',template: ` <div> <v-container fluID class="my-0 py-0"> <v-row class="my-0 py-0"> <v-col class="my-0 py-0"> <SELEcted-material v-model="local.material" /> </v-col> <v-col class="my-0 py-0"> <v-text-fIEld class="my-0 py-0" v-model="local.material.q" /> </v-col> <v-col class="my-0 py-0"> <v-row class="my-0 py-0"> <v-col class="my-0 py-0"> <v-btn class="my-0 py-0" color="success" icon @click="append" > <v-icon>mdi-plus</v-icon> </v-btn> </v-col> <v-col class="my-0 py-0"> <v-btn class="my-0 py-0" color="error" icon @click="remove" > <v-icon>mdi-minus</v-icon> </v-btn> </v-col> </v-row> </v-col> </v-row> </v-container> </div> `,append() { this.$emit('append'); },remove() { this.$emit('remove',this.local.ID); },}) new Vue({ el: '#app',vuetify: new Vuetify(),data() { return { boards: [],mounted() { this.append(); },methods: { append() { this.boards.push({ ID: Date.Now(),material: { ID: 1,}); },remove(ID) { if (this.boards.length !== 1) { const index = this.boards.findindex(board => board.ID === ID); this.boards.splice(index,1); } },})
@H_607_14@<link href="https://Fonts.GoogleAPIs.com/CSS?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.Jsdelivr.net/npm/@mdi/Font@4.x/CSS/materialdesignicons.min.CSS" rel="stylesheet"> <link href="https://cdn.Jsdelivr.net/npm/@mdi/Font@5.x/CSS/materialdesignicons.min.CSS" rel="stylesheet"> <link href="https://Fonts.GoogleAPIs.com/CSS?family=Material+Icons" rel="stylesheet"> <link href="https://cdn.Jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.CSS" rel="stylesheet"> <script src="https://cdn.Jsdelivr.net/npm/vue@2.x/dist/vue.Js"></script> <script src="https://cdn.Jsdelivr.net/npm/vuetify@2.x/dist/vuetify.Js"></script> <div ID="app"> <v-app> <v-main> <v-row v-for="(board,indeX) in boards" :key="index"> <v-col> <add-board :key="index" v-model="boards[index]" @append="append" @remove="remove" /> </v-col> </v-row> <v-row v-for="(board,indeX) in boards" :key="`_${index}`"> <v-col> {{ board.ID }} | {{ board.material.q }} </v-col> </v-row> </v-main> </v-app> </div>
UPD：
替换为 ID 后：
从 @H_607_14@v-for 列表中删除项目时，如果您不想重复使用 DOM，那么使用每个项目唯一的 @H_607_14@key 很重要。如果您使用 @H_607_14@index 并移除一个项目，下一个项目将使用其索引，因此 Vue 会重用已移除项目的 DOM。
使用 @H_607_14@id 作为键，因为它似乎是唯一的：
@H_607_14@<v-row v-for="(board,indeX) in boards" :key="board.id">
另外，检查 @H_607_14@v-model 上的 @H_607_14@<v-text-field>，您似乎打算使用 @H_607_14@local.material.q 而不是 @H_607_14@local.q：
@H_607_14@<v-text-field class="my-0 py-0" v-model="local.material.q" />
以上是大佬教程为你收集整理的为什么Vue渲染组件不正确？全部内容，希望文章能够帮你解决为什么Vue渲染组件不正确？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。