Vue.js v-如果在v-inside内没有主动监听数组更改

时间:2017-09-25 05:52:41

标签: javascript arrays multidimensional-array vue.js

我正在尝试为数组内的每个数组显示一个元素,并在其数组包含true布尔值时显示该元素。 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 个答案:

答案 0 :(得分:2)

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

例如,

Vue.set(value, 1, false);

注意:像value[1] = false;这样简单的更新这将无法正常工作

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