Vue.$set的使用场景

有这样一个需求，用户可以增加多个输入框可以编辑：

add.png

实现的思路很简单，点击增加的时候，往一个数组里面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，也就是这个数组并没被监听起来：

666.png

怎么办呢？$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，按钮也生效了：

777.png

最后编辑于：2020.06.11 05:01:32