最近第一次用到Vue来写表单,当点击表单行进行修改操作,弹出修改框,因为用的v-model来绑定,发现把值清空后原页面也跟着改变了,虽然是个小问题,还是思考了很久,想到双向绑定后数据指向为同一地址了,之后使用了深克隆总算解决了,记录一下

<tr id="test1" v-for="item in infoGroup" @click='updateInfo(item)'>
    <td>{{item.aa}}</td>
</tr>

var test1=new Vue({
    el:'#test1',
    data:{
        infoGroup:''
    },
    methods:{
        updateInfo:function(item){
                //深克隆
                let o=JSON.parse(JSON.stringify(item));
                test2.info=item;
        }
    }
})

<div id="test2">
    <input v-model='infos.aa'>
</div>

var test2=new Vue({
    el:'#test2',
    data:{
        info:''
    }
})

 

Logo

前往低代码交流专区

更多推荐