vue+elment Ui 動態創建輸入框

<el-form-item
        v-for="(domain, index) in dataForm.domains"
        :label=domain.key
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
      required: true, message: '屬性不能爲空', trigger: 'blur'}">
        <el-input v-model="domain.value"></el-input><el-button     @click.prevent="removeDomain(domain)">刪除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dataForm')">提交屬性 </el-button>
        <el-button @click="addDomain">新增屬性</el-button>
      </el-form-item>

<script>
  export default {
    data() {
      return {
        visible: false
      
        dataForm: {
       
          domains: [{
            key: '屬性a',
            value: 'aaa'
          }, {
            key: '屬性b',
            value: 'bbb'
          }]
        },
        imgList: []
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/.../${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
               ...
              }
            }).then(() => {
              if (this.dataForm.id) {
                this.$http({
                  url: this.$http.adornUrl(`...`),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data) {
                    this.imgList = data
                  }
                })
              }
            })
          }
        })
      },
    
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/.../${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
             ...
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.dataForm.domains)
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      removeDomain(item) {
        var index = this.dataForm.domains.indexOf(item)
        if (index !== -1) {
          this.dataForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.$prompt('請輸入屬性', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
       
          this.dataForm.domains.push({
            value: '',
            key: value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消輸入'
          })
        })
      }
    }
  }
</script>

 1.注意點：domains 爲數組