点击添加生成一个元素用Vue怎么实现功能？

Question

我现在需要实现一个功能，点击右边的“添加”就生成一个左边的框框，这个功能如何用Vue来实现，各位大神能否指点下，提供下思路。对Vue不是太熟悉，也许是没有真正的懂得Vue的特点，所以没什么头绪

Answer 1

左边的框框列表可以用 ul 来做，v-for 一个对象数组

list: [
    {
        label: '关系',
        value: '',
    },
    ...
]

那就明了了，点击'添加'，弹出个输入框让他自己填写 label，然后给 list 数组增加一个对象就行.

Answer 2

整体思路：
数据改变视图
template

<template>
    <div>
        <div v-for="(item , i) in list" :key="i">
            <span v-for="(val,key) in item" :key="key">
                <lable>{{val.label}}</lable>
                <input v-model="val.prop"></input>
            </span>
        </div>
        <div @click="add">添加</div>
    </div>
</tempalte>

JS

const baseInfo =[
    {label:'关系',prop:null},
    {label:'姓名',prop:null},
    {label:'电话',prop:null}
];
exprot default{
//...
    data(){
        return {
            list:[baseInfo]
        }
    },
    methods:{
        add(){
            this.list.push(baseInfo);
        }
    }
}

Answer 3

如果关系可以自定义，那么
数据结构：

 const 关系键值对 = {
关系0：[{姓名：'姓名00',电话：'电话00'}，{姓名：'姓名01',电话：'电话01'}],
关系1：[{姓名：'姓名10',电话：'电话10'}，{姓名：'姓名11',电话：'电话11'}]
}

；
逻辑：根据当前选择的关系（如关系0），然后将 联系人的信息填入关系 为 本次选择关系的 联系人中。
思路的代码实现：比如选择关系为关系N，联系人姓名为 姓名03，联系人电话为 电话03；

     
     let userInfo = {姓名：'姓名03',电话：'电话03'};
     if(关系键值对['关系N']){
         关系键值对['关系N'].push(userInfo);
     }else{
         关系键值对['关系N'] = [];
         关系键值对['关系N'].push(userInfo);
     }
    

如果有看不懂得地方，你可以把你的model名字发给我，我直接给你写代码。