Question

我正在尝试仅将vue转换应用于v-design-row组件。我使用transition-group来处理数据对象中的更改，但我在v-for内有3行。将密钥包含在其他行中以防止此警告不是问题：

[Vue警告]：孩子必须得到钥匙：

我可以看到，因为一个子元素是一个嵌套的v-for循环，一旦我将密钥添加到v-catagory-row组件，就会显示以下错误：

TypeError：el.getAttribute不是函数

是否有办法省略transition-group中的单个子元素？
任何人都可以建议我如何构建这个以达到预期的效果吗？

component.vue

    <template>
    <table class="table">
        <thead>
        <th>Image</th>
        <th>Name</th>
        <th>Description</th>
        <th>Order</th>
        <th>Status</th>
        <th>Edit</th>
        <th>Delete</th>
        </thead>
        <transition-group name="fade" tag="tbody">
            <template v-for="design in data">
                <v-catagory-row @update="updateValue" v-for="catagory in design.catagories" :catagory="catagory" :catagoryCheck="catagoryCheck" :key="design.id"></v-catagory-row>
                <v-design-row @delete="deleteDesign" :design="design" :key="design.id"></v-design-row>
                <v-description-row :design="design" :key="design.id"></v-description-row>
            </template>
        </transition-group>
    </table>
   </template>

嵌套v-for上的vue transition-group键

0 个答案: