vue模块动态增加和删除

一个常见的模块增加和删除功能
如果用js写相对复杂一点
elementUi 表单组件中有一个类似的功能 可以改成自己的需求

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item prop="name" label="问卷名称">
        <el-input v-model="dynamicValidateForm.name"></el-input>
      </el-form-item>
      <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="index + 1 + '、'" :key="domain.key"
        :prop="'domains.' + index + '.value'">
        <div v-if="domain.textValue == undefined">
          <el-input v-model="domain.value" placeholder="请输入想问的问题"></el-input>
          <el-checkbox v-model="domain.checked" style="margin-right:30px">是否必填</el-checkbox>
          <i class="el-icon-delete" style="font-size:18px;cursor: pointer;" @click.prevent="removeDomain(domain)"></i>
          <div style="margin-top:10px">
            <el-rate v-model="domain.rateValue"></el-rate>
          </div>
        </div>
        <div v-else>
          <el-input v-model="domain.value"></el-input>
          <el-checkbox v-model="domain.checked" style="margin-right:30px">是否必填</el-checkbox>
          <i class="el-icon-delete" style="font-size:18px;cursor: pointer;" @click.prevent="removeDomain(domain)"></i>
          <div style="margin-top:10px">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="domain.textValue">
            </el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">确定</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">返回</el-button>
        <el-button @click="addDomain(1)">添加NPS题</el-button>
        <el-button @click="addDomain(2)">添加反馈填空题</el-button>
      </el-form-item>
    </el-form>

 data() {
    return {
      dynamicValidateForm: {
        name: '',
        domains: [{
          value: '',
          rateValue: 4,
          checked: false,
        }, {
          value: '',
          rateValue: 4,
          checked: false,
        }, {
          value: '非常感谢您的反馈！您还有什么意见和建议想对我们说吗？',
          textValue: '',
          checked: false,
        }],
      },
    }
  },

    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain(res) {
      if (res == 1) {
        this.dynamicValidateForm.domains.push({
          value: '',
          rateValue: 4,
          checked: false,
          key: Date.now()
        });
      } else {
        this.dynamicValidateForm.domains.push({
          value: '非常感谢您的反馈！您还有什么意见和建议想对我们说吗？',
          textValue: '',
          checked: false,
          key: Date.now()
        });
      }
    },