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>