时间戳

首页 > 解决方案 > Vue js 改变数组值

javascript - Vue js 改变数组值

问题描述

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。

标签： javascriptvue.js

解决方案

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

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

当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。同样，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

推荐阅读