Я хочу сделать валидацию 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>
то валидация работает, а вот на компоненты нет(