Question

我需要验证Vue Element中的嵌套表单数据。 example与我的代码非常相似。 dynamicValidateForm包裹在MainForm中的唯一区别。但是我无法正常工作。

这是我的代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">

    <el-form :model="MainForm.dynamicValidateForm" ref="MainForm.dynamicValidateForm" label-width="120px" class="demo-dynamic">

        <el-form-item
          v-for="(domain, index) in MainForm.dynamicValidateForm.domains"
          :label="'Domain' + index"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="rules"
        >
          <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('MainForm')">Submit</el-button>
          <el-button @click="addDomain">New domain</el-button>
          <el-button @click="resetForm('MainForm.dynamicValidateForm')">Reset</el-button>
        </el-form-item>

    </el-form>

</div>

应用程序：

new Vue({
  el: '#app',

    data: {

    MainForm:
    {
      dynamicValidateForm: {
        domains: [{
          key: 1,
          value: ''
        }],
      },
    },  

  rules: {
      value: [
        { required: true, message: 'Please input'},
      ],


    }
},

methods: {
 submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },

  addDomain() {
    this.MainForm.dynamicValidateForm.domains.push({
      key: Date.now(),
      value: ''
    });
  },

Validate(formName) {
this.$refs[formName].validate((valid) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!');
    return false;
  }
});
},

        }

})

我想用相同的规则验证所有嵌套元素。

我还尝试了另一种方式，但是又遇到了另一个错误https://jsfiddle.net/st56h3ky/ Error: please transfer a valid prop path to form item!

如何验证Vue元素中的嵌套表单数据？

0 个答案: