Vue.js v-if inside v-for 不主动监听数组变化

Posted 2023-02-22

【中文标题】Vue.js v-if inside v-for 不主动监听数组变化

【英文标题】：Vue.js v-if inside v-for not actively listening to array change

【发布时间】：2018-03-06 00:31:29

【问题描述】：

我正在尝试为数组中的每个数组显示一个元素，并在其数组包含真正的布尔值时显示该元素。 if 函数第一次运行，但是当值改变时元素并没有消失。

<li v-for="(value, index) in list">
    <span>  value[0]  </span>
    <span v-if='value[1]'>  value[2]  </span>
</li>


var List = new Vue(
    el: "#List",
    data: 
        list: ['fizz',true,0],

    ,
    methods: 
        toggleItem: function(index) 
            this.list[index][1] = !this.list[index][1];
        ,

    
)

我应该可以跑

List.toggleItem(0)

【问题讨论】：

如何更新阵列？向我们展示该代码...

【参考方案1】：

如果您要更新 Vue 中的数组，请使用 Vue.set(); 以便 Vue 可以跟踪更改并更新模板

例如，

Vue.set(value, 1, false);

注意：像这样简单更新value[1] = false; 这将不起作用

更多信息，https://vuejs.org/v2/guide/list.html#Caveats