vue数组和对象不能直接赋值

问题情况：

<Row :key="index"
    v-for="item,index in strategy_level_list"
>
    <Col
        <input :key="index" @input="changeFunc(index, $event)"> 
    >
    </Col>
</Row>
<button @click="addStrategy">增加策略等级</button>


data(){
    return{
        strategy_level_list: [],
        strategy_level_item: { "key": -1 }
    }
},
methods:{
    addStrategy(){
        this.strategy_level_list.push(this.strategy_level_item);
    },
    changeFunc(index, value){
        strategy_level_list[index].key = value;
    }
}

 

上述代码会导致：每次更改input框中的内容时，所有input框的value都会同步改变

 

问题原因：

Vue不能检测以下变动的数组：　

　　当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

　　当你修改数组的长度时，例如：vm.items.length = newLength

　　当第一种情况需求时，可以使用this.$set(this.arr,index,newVal)

Vue不能检测对象属性的添加和删除：

　　可以使用this.$set(this.person,'age',12)

     当需要添加多个对象时，Object.assign({},this.person,{age:12,name:'wee'})

 

 

解决方法：

将changFunc中的代码修改成

changeFunc(index, value){
    let newVal = { "key":value };
    this.$set(this.strategy_level_list, index, newVal);
}

 

转载于:https://www.cnblogs.com/haishen/p/10601479.html