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>