文章参考

1. https://cn.vuejs.org/v2/api/#Vue-set

问题来源

在工作中遇到如下需求 —— 用户可以传递多个值，值的数量不确定，根据用户的自己的输入决定。

问题难点描述

由于VUE如果要实现双向绑定，一定要预先在data中定义好，然后对data中的属性的代理，实现双向绑定。然而在VUE对象生成之后再实现getter和setter方法，则VUE对象无法捕获。

解决办法：

VUE对象提供了$set方法

技术说明

Vue.set( object, key, value )

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

案例

<template>
    <div>
        <p v-for="(item,key) in personInfo" style="margin-top: 10px;">
            <input v-model="item.name" style="background: #eee">{{item.name}}<br>
        </p>
        <button @click="addArray">add1</button>
    </div>
</template>
 
<script>
    import draggable from 'vuedraggable'
 
    export default {
        data: function(){
            return {
                personInfo:{
                    "huangbiao":{
                        name:"--huangbiao---"
                    }
                }
            }
        },
        methods:{
            addArray:function(){
                console.dir(this.personInfo);
                var liumei = {
                    name:"--liumei---"
                };
                this.$set(this.personInfo,"liumei",liumei)
                console.dir(this.personInfo);
            }
        }
    }
</script>
 
<style scpoed>
 
    .normal {
        background-color: grey;
    }
    .drag {
        background-color: green;
    }
    .dragArea{
        min-height: 10px;
    }
</style>