Vuejs：重新渲染列表

Question

我试图弄清楚如何重新呈现名称类型列表。我想确保一次只存在一个类型为0（主要）的名称，因此我想根据类型为0的数组中的名称启用/禁用该选项。

<a v-for="type in names.types" v-bind:class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
    @{{ type.type }}
</a>

每次添加/删除名称时，如何重新呈现列表？

Answer 1

直接使用嵌套数据并绑定到每个项目的key属性：

<强>模板

<a v-for="type in types" 
   :key="type.type"
   :class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
    @{{ type.type }}
</a>

<强>脚本

computed: {
    types() {
        return this.names.types
    }
}