Vee проверяет версию x3 с помощью форм Netlify

У меня есть простая рабочая форма, в которой я отправляю сообщения с помощью форм Netlify. Формы Netlify довольно просты, и вам просто нужно добавить

name="contact" data-netlify="true" method="POST" и Netlify выполняет всю внутреннюю работу

Это выглядит примерно так:

<template>
  <form ref="contact" name="contact" action="/success" 
  data-netlify="true" method="POST" @submit.prevent="submit()">
    <input type="text"  />
    <button type="submit"> Send </button>
  </form>
</template>

<script>
export default {
	methods: {
		submit() {
			this.$refs.contact.submit()
		},
	},
}
</script>

Приведенный выше код работает должным образом. Теперь я пытаюсь добавить плагин vee-validate в свою форму, где вам нужно добавить два компонента ValidationProvider, ValidationObserver. Вот где я получаю ошибки. Теперь мой код выглядит примерно так:

<template>
  <ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
  	<ValidationProvider rules="required" tag="div">
      <input type="text"  />
    </ValidationProvider>
    <button type="submit"> Send </button>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
  methods: {
    async submit() {
      const isValid = await this.$refs.contact.validate()
      if (!isValid) {
        return
      }

      this.$refs.contact.submit()
    },
  },
}
</script>

Обратите внимание, что я использую tag="form", когда визуализирую компонент как форму, поскольку, если я просто оберну форму, Netlify не распознает форму. в моем submit() я сначала запускаю Validation, и если результат положительный, я отправляю форму так же, как и раньше, но я бегу к этой ошибке this.$refs.contact.submit is not a function. Интересно то, что если я запускаю document.querySelector('.form').submit() в своей функции submit (), она работает.

Я думаю, что моя заявка плохая, или, может быть, я делаю что-то не так.


netlify forms vue.js nuxt.js vee-validate
person mart cube    schedule 15.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я ничего не знаю о Netlify, но vee-validate требует, чтобы вы установили v-model на входе или управляли проверкой вручную. Насколько я понимаю, он использует атрибут v-model, чтобы выяснить, что отслеживать в ValidationProvider. Это тот элемент, к которому он применяет правила (required), поэтому я думаю, вам это понадобится:

<template>
  <ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
    <ValidationProvider rules="required" tag="div">
      <input type="text" v-model="myTextInput" />
    </ValidationProvider>
    <button type="submit"> Send </button>
  </ValidationObserver>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
  data() {
     return {
        myTextInput:''
     };
  },
  methods: {
    async submit() {
      const isValid = await this.$refs.contact.validate()
      if (!isValid) {
        return
      }

      this.$refs.contact.submit()
    },
  },
}
</script>
person Ryley    schedule 15.11.2019
comment
Чтобы упростить свой код, я удалил это, да, я использую v-модель, но все еще не работаю. Интересно, что если я позвоню document.querySelector('.form').submit(), моя заявка будет отброшена, но с this.$refs.contact.submit() я получаю ошибку. И это происходит, когда я использую компонент ValidationProvider - person mart cube; 16.11.2019