在 v-for 循环中包装一个 ValidationObserver

Question

我有一个 v-for 循环，它允许我向我的表单动态添加新字段。这个循环位于一个选项卡内，我需要在进入表单的下一部分之前对其进行验证。当我将 v-for 放在我的验证观察器中时，似乎没有任何渲染。还有其他方法可以实现吗？

我正在使用 VeeValidate 3

<template>
  <div>
    <b-card class="mb-3">
    <ValidationObserver :ref="'contact_obs'" v-slot="{ invalid }">
      <div
        v-for="(contact, index) in this.applicant.contacts"
        :key="contact.id"
        role="tablist"
      >

          <b-form-row>
            <BTextInputWithValidation
              rules="required"
              class="col-md-4"
              :label="
                $t('contact_name', { name: applicant.contacts[index].title })
              "
              :name="$t('contact_name')"
              v-model="applicant.contacts[index].name"
              description
              placeholder
            />

            <BTextInputWithValidation
              rules
              class="col-md-4"
              :label="$t('contact_title')"
              :name="$t('contact_title')"
              v-model="applicant.contacts[index].title"
              description
              placeholder
            />

            <BTextInputWithValidation
              rules
              class="col-md-3"
              :label="$t('contact_email_address')"
              :name="$t('contact_email_address')"
              v-model="applicant.contacts[index].email"
              description
              placeholder
            />

            <b-button
              variant="outline-danger"
              class="float-right mt-4 mb-4 ml-3"
              v-on:click="deleteContact(index)"
            >
              <span class="fas fa-user-minus"></span>
            </b-button>
          </b-form-row>

      </div>
     </ValidationObserver>
      <b-button
        variant="outline-success"
        class="float-right mt-4 mb-4 ml-3"
        v-on:click="addContact"
      >
        <span class="fas fa-user-plus"></span>
      </b-button>
    </b-card>
  </div>
</template>

<script>
import { ValidationObserver } from 'vee-validate'
import VeeValidate from 'vee-validate'
import BTextInputWithValidation from './inputs/BTextInputWithValidation'
let id = 10

export default {
  components: { ValidationObserver, BTextInputWithValidation },
  mounted() {},
  data: function() {
    return {
      applicant: {
        contacts: [
          {
            id: '1',
            name: '',
            title: 'Primary Principal',
            email: ''
          },
          {
            id: '2',
            name: '',
            title: 'Secondary Principal',
            email: ''
          },
          {
            id: '3',
            name: '',
            title: 'Accounts Receivable',
            email: ''
          }
        ]
      }
    }
  },
  methods: {
    addContact: function(params) {
      this.applicant.contacts.push({
        id: id,
        name: '',
        title: '',
        email: ''
      })
      id++
    },
    deleteContact: function(index) {
      this.$delete(this.applicant.contacts, index)
    },
    validate() {
      const isValid = this.$refs.contact_obs.validate()
      if (isValid) {
        this.$emit('on-validate', this.$data, isValid)
      }
      return isValid
      // return true
    }
  }
}
</script>

<style lang="scss" scoped></style>

Answer 1

我认为问题出在这里：

v-for="(contact, index) in this.applicant.contacts"

一般来说，您应该避免使用 this. 前缀来访问模板中的属性，但这通常没有坏处。这是它确实破坏了某些东西的情况之一。 this 未引用作用域槽内的正确对象。

很惊讶您在控制台中没有看到错误。

在 v-for 循环中包装一个 ValidationObserver

Wrapping a ValidationObserver around a v-for loop

vue.js

vee-validate