时间戳

首页 > 解决方案 > 即使使用 set，Vue 也不会重新渲染列表

vue.js - 即使使用 set，Vue 也不会重新渲染列表

问题描述

我列出了每个项目都可以删除的列表，我的代码如下所示：

模板

                    <template v-for="(timeFrame, index) in form.timeFrames">
                        
                        <el-form-item >
                                <el-button @click="removeTimeFrame(index)">
                                    <i class="el-icon-remove"></i>
                                </el-button>
                            </el-form-item>
                    </template>

JS：

removeTimeFrame(index = 0) {
            this.$set(this.form, 'timeFrames', this.form.timeFrames.filter((_, i) => index !== i));
}

不知何故，在我向列表中添加新项目之前，列表不会重新呈现。有人知道我的代码有什么问题吗？

标签： vue.jsvuejs2vue-component

解决方案

Vue 中的模板需要一个顶级元素来包装其内容，因此您不应将v-for直接分配给模板标签，而应在模板标签div内创建一个并添加v-for到el-form-item组件或将其包装在另一个div标签中。

此外，循环中的每个元素都v-for应该包含一个键。如果您不打算从循环中重新排序或删除元素，则index每个元素的 -value 都可以。看到您的示例，我怀疑唯一标识符（例如随机生成的唯一 ID）可能更适合您的用例。

推荐阅读