zoukankan      html  css  js  c++  java
  • 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);
    }
  • 相关阅读:
    ansible 批量在远程主机上执行命令
    SQLAlchemy
    operator, itertools
    mongodb基础语法
    django model Meta选项
    __getattr__,settr
    django的contenttype表
    time和datetime和tzinfo
    全局钩子的改名
    dom中文字居中
  • 原文地址:https://www.cnblogs.com/haishen/p/10601479.html
Copyright © 2011-2022 走看看