有這樣一個需求，使用者可以增加多個輸入框可以編輯：

實現的思路很簡單，點選增加的時候，往一個數組裡面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，按鈕也生效了：