@postya

Как сделать валидацию на импортированном компоненте в Vue Js c vee-validate?

Я хочу сделать валидацию textarea по нажатию кнопки. Чтобы проверить: если textarea пустое, то показать ошибку:
"Field is required"
Если нет, убрать ошибку
Как сделать,чтобы валидация vee-validate работала на импортируемые компоненты вo Vue js?

Подключаю vee-validate в файле main.js:

import { ValidationProvider } from "vee-validate";
import * as VeeValidate from "vee-validate";
import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";

Vue.use(VeeValidate);
Vue.component("ValidationProvider", ValidationProvider);

extend("required", {
	...required,
	message: "Field is required!"
});


Иммется компонент textarea в отдельном файле TextAreaQuestion.vue:

<template>
	<div>
		<textarea
			class="sentence-textarea"
			cols="30"
			rows="3"
			v-model="questionText"
			placeholder="type your question here"
		></textarea>
	</div>
</template>

<script>
export default {
	name: "TextAreaQuestion",
	data() {
		return {
			questionText: "1111"
		};
	}
};
</script>


В файле Admin.vue я импортирую этот компонент и использую его:
<ValidationProvider name="question" rules="required">
	<div slot-scope="{ errors }">
	    <TextAreaQuestion v-model="question" />
		<p v-bind:class="[ hasError ? 'showError' : 'noError']">
		{{ errors[0] }}
		</p>
		</div>
		</ValidationProvider>
<script>
import TextAreaQuestion from "../components/TextAreaQuestion";

export default { {
components: {		
		TextAreaQuestion,		
	},
data() {
		return {
			question: "",			
			hasError: true
		};
	},
}
</script>


Если я использую не кмопоненты, а простые элементы, например:
<ValidationProvider name="question" rules="required">
        <div slot-scope="{ errors }">
          <label for="question">Question</label>
          <input type="text" id="question" v-model="question" />
          <p v-bind:class="[hasError ? 'showError' : 'noError']">
            {{ errors[0] }}
          </p>
        </div>
      </ValidationProvider>


то валидация работает, а вот на компоненты нет(
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы