时间戳

首页 > 解决方案 > 将 ValidationObserver 包裹在 v-for 循环周围

vue.js - 将 ValidationObserver 包裹在 v-for 循环周围

问题描述

我有一个 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>

标签： vue.jsvee-validate

解决方案

我相信问题出在这里：

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

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

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

推荐阅读