Question

Vue.js不会让我更改数组值：

<div class="col-sm-1 col-md-1" v-for="(l, i) in locations" :key="i">
     <span :class="{'location-active': isActive[1]}" @click="setActive">{{l}}</span>
</div>

数据：

   data() {
        return {
            isActive: [false, false, false, false, false]
        }
    }

方法：

  setActive() {
        this.isActive[1] = true;
    }

我首先使用了for循环，但它不起作用，因此尝试手动设置数组的值，这将不起作用，也不会将isActive [index]设置为true。

Answer 1

这是Vue的常见“陷阱”，以及它如何查找模型更改。

https://vuejs.org/2016/02/06/common-gotchas/

通过直接设置索引（例如arr [0] = val）或修改其length属性来修改Array时。同样，Vue.js无法获取这些更改。始终通过使用Array实例方法或完全替换它来修改数组。 Vue提供了一种方便的方法arr。$ set（index，value），它是arr.splice（index，1，value）的语法糖。

语法已在2.0中更新为以下内容：

Vue.set( target, propertyName/index, value )

所以在你的情况下

Vue.set(this.isActive, 1 ,true);

也请参见此处：http://vuejs.org/guide/list.html#Array-Change-Detection

Vue JS更改错误值

1 个答案: