動態生成input並綁定v-model

引言：在我們編寫代碼的時候，往往會出現例如動態增加input輸入框等等動態操作，在vue項目中，如果動態增加input並且綁定v-model，並實現互不影響，則需要深拷貝，如果直接push的話是為淺拷貝，所有動態生成的input綁定的v-model地址值都指向同一個地址，就導致輸入一個input，其余的input都會變化

<div id='app'>   
    <input type='text' v-model='item.val'  v-for='(item, index) in list' :key='index'>
    <button @click='sureFn'>增加</button>
</div>

<script>
    const vm = new Vue({
       el: '#app',
       data: {
           list: []
       },
       methods: {
           sureFn () {
              let params = {val: null, data:null}
              for (let i = 0, j = 10, i < j, j++) {
                  this.list.push(Object.assign({}, params))
              }
           }
       }
    })
</script>

另一種寫法，直接push對象， 只要實現地址值不一樣就可以

<div id='app'>   
    <input type='text' v-model='item.val'  v-for='(item, index) in list' :key='index'>
    <button @click='sureFn'>增加</button>
</div>

<script>
    const vm = new Vue({
       el: '#app',
       data: {
           list: []
       },
       methods: {
           sureFn () {
              for (let i = 0, j = 10, i < j, j++) {
                  this.list.push({val: null, data:null})
              }
           }
       }
    })
</script>