Vue v-model表单数据绑定时遇到的坑,数组绑定
<div id="myApp"> input1:<input class="input1" type="text" v-model="input1[0].text1"><br> input2:<input class="input2" type="text" v-model="input2[0].text1"> <input type="button" @click="copyInput()" value="赋值"><br><br> input2[0].tex1:{{input2[0].text1}}<br> input2[0].tex2:{{input2[0].text2}} </div> <script> var myApp=new Vue({ el:"#myApp", data:{ input1:[ { text1:"111", text2:"222" } ], input2:[ { text1:"", text2:"" } ] }, methods:{ copyInput:function () { this.input2[0]=JSON.parse(JSON.stringify(this.input1[0])); } } }) </script>
代码很简单,把input1中的一个数组对象拷贝给input2,但实际操作发现,执行拷贝函数后,input2显示并没有任何变化,但给拷贝函数添加consolo.log(this.input2[0])发现,input2的确已经赋值,而且在执行拷贝函数后如果再对input1进行数值变化,input2马上就会变化成它拷贝好的值,此次就说明model层发生了变化,但view层没有变,这是为什么?然后我把input2换成对象,而不是数组的形式
<div id="myApp"> input1:<input class="input1" type="text" v-model="input1[0].text1"><br> input2:<input class="input2" type="text" v-model="input2.text1"> <input type="button" @click="copyInput()" value="赋值"><br><br> input2[0].tex1:{{input2.text1}}<br> input2[0].tex2:{{input2.text2}} </div> <script> var myApp=new Vue({ el:"#myApp", data:{ input1:[ { text1:"111", text2:"222" } ], input2: { text1:"", text2:"" } }, methods:{ copyInput:function () { this.input2=JSON.parse(JSON.stringify(this.input1[0])); } } }) </script>
然后就发现input2就可以实时更新数据了
具体原因查看了资料http://www.cnblogs.com/zhuzhenwei918/p/6893496.html,
使用 Vue.set() 的方式来改变、增加解决了问题
<div id="myApp"> input1:<input class="input1" type="text" v-model="input1[0].text1"><br> input2:<input class="input2" type="text" v-model="input2[0].text1"> <input type="button" @click="copyInput()" value="赋值"><br><br> input2[0].tex1:{{input2[0].text1}}<br> input2[0].tex2:{{input2[0].text2}} </div> <script> var myApp=new Vue({ el:"#myApp", data:{ input1:[ { text1:"111", text2:"222" } ], input2:[ { text1:"", text2:"" } ] }, methods:{ copyInput:function () { var obj=JSON.parse(JSON.stringify(this.input1[0])); Vue.set(this.input2,0,obj); } } }) </script>