vue如何动态增加表单，点击增加，多一行，并且可以删除。

Question

这里的数据是这样来的！

之前写过类似的是可以增加删除的，因为没有那么层。这个数据复杂起来我就不行了。在线求助各位大佬

-------------------------分隔线---------------------------------------------
问题已经解决，因为我在同个页面其他地方也用得到这个方法，所以我直接写了个公用增加删除方法。

//这里的item.link 是 form2.honor.link
<el-table :data="item.link" style="width: 100%">
  <el-table-column align="center" label="友情链接" width="250">
    <template slot-scope="scope">
      <el-input
      v-model="scope.row.name"
      size="mini"
      placeholder="友情链接"
      style="width: 100%;"
      autocomplete="off"
    ></el-input>
    </template>
  </el-table-column>

  <el-table-column align="center" label="网址">
    <template slot-scope="scope">
      <el-input
      v-model="scope.row.url"
      size="mini"
      placeholder="网址"
      style="width: 100%;"
      autocomplete="off"
    ></el-input>
    </template>
  </el-table-column>

  <el-table-column align="center" label="操作" fixed="right">
    <template slot-scope="scope">
      <el-button size="mini" @click="delArrt({to:'form2',index:index,name:'honor',key:'link',vindex:scope.$index})">-</el-button>
    </template>
  </el-table-column>
</el-table>```

<el-button
  size="mini"
  @click="addArrt({to:'form2',index:index,name:'honor',key:'link',value:{name: '',url:'',old_flower:false}})"
>+</el-button>

//添加
addArrt(data) {
  if (!this[data.to][data.name][data.index][data.key]) {
    Vue.set(this[data.to][data.name][data.index], data.key, []);
  }
  console.log(this[data.to][data.name][data.index][data.key])
  Vue.set(
    this[data.to][data.name][data.index][data.key],
    this[data.to][data.name][data.index][data.key].length,
    data.value
  );
  console.log(this[data.to][data.name][data.index][data.key])
},

//删除
delArrt(data) {
  Vue.delete(this[data.to][data.name][data.index][data.key], data.vindex);
},
```

记得 `
import Vue from 'vue';

Answer 1

//添加：
add(){
    this.form2.honor.link.push({...})
}


//渲染
<div v-for='item in form2.honor.link' @click='delete(item)'>

//删除
delete(item){
    this.form2.honor.link = this.form2.honor.link.filter(val => {
        return val != item;//对象是引用类型，可以直接比较地址，剔除数组中的选中的那个
    })
}

Answer 2

你这个描述不知道该如何下手，建议你做一个 demo 用 codepen 放出来，以便给你解决。
一般就是直接找到数据删除掉就好了

Answer 3

点击加就push({data}) 点击减就 splice(index,1) 在减号按钮上绑定个 @click="minus(index)" 就可以啦，如果你这些都不懂那就有点难搞哦！建议去看看基础实战视频先。

Answer 4

你需要了解一下vue.$set这个方法，一般都是处理这种数据变化，视图没变化的

Answer 5

可以参考iviewui 动态增减表单项的思路