有這樣一個需求，用戶可以增加多個輸入框可以編輯：
實現的思路很簡單，點擊增加的時候，往一個數組里面push一條數據即可：
<template> <div> <div v-for="(item,k) in prodForm.seqNos" :key="k"> <input type="text" v-model="item.seqNo" /> </div> <button @click="add">增加</button> </div> </template> <script> export default { name: "addInput", mounted(){ this.prodForm = this.basicInfo //初始化 this.prodForm.seqNos = [] //因basicInfo沒有seqNos，因此重新添加 console.log(this.prodForm) }, data(){ return { prodForm:{ id:'', seqNos:[], }, basicInfo:{ id:1 } } }, methods:{ add(){ this.prodForm.seqNos.push({seqNo:''}) } }, } </script> <style scoped> .btn{ width:100px; margin:10px; } </style> 在mounted有一個初始化賦值操作，而basicInfo里面並沒有seqNos這個數組，當賦值完成后，我需要重新添加回來，這樣就有問題了，你點擊增加的按鈕無法生效，為啥呢？
根據官方文檔定義：
如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。
也就是說，默認vue會遍歷data里面的所有屬性，並使用Object.defineProperty把這些屬性全部轉為 getter/setter。
我們通過打印prodForm變量，發現seqNos這個數組並未增加getter和setter，也就是這個數組並沒被監聽起來：
怎么辦呢？$set就派上用場了:
Vue.$set(object, key, value) 我們將代碼改造一下：
<template> <div> <div v-for="(item,k) in prodForm.seqNos" :key="k"> <input type="text" v-model="item.seqNo" /> </div> <button @click="add">增加</button> </div> </template> <script> export default { name: "addInput", mounted(){ this.prodForm = this.basicInfo //初始化 //this.prodForm.seqNos = [] //因basicInfo沒有seqNos，因此重新添加 this.$set(this.prodForm,'seqNos',[]) console.log(this.prodForm) }, data(){ return { prodForm:{ id:'', seqNos:[], }, basicInfo:{ id:1 } } }, methods:{ add(){ this.prodForm.seqNos.push({seqNo:''}) } }, } </script> <style scoped> .btn{ width:100px; margin:10px; } </style> 這時再打印prodForm變量，發現seqNos數組已經添加了getter和setter，按鈕也生效了：
