Vue vuelidate $ v не определен

Я новичок в vue js, мой файл main.js выглядит так

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes.js'
import Vuelidate from 'vuelidate'
createApp(App).use(Vuelidate)
createApp(App).use(router).mount('#app')

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

<template>
    <form methos="post" v-on:submit.prevent="submit">
    <input type="text" v-model.trim="$v.indate.$model" :class="{'is-invalid': 
     validationStatus($v.indate)}" class="form-control mt-2 mb-2"  placeholder="DD/MM/YYYY">
        <div v-if="!$v.indate.required" class="invalid-feedback">Inward date is required.</div>
    </form>
</template>
<script>
import {required} from 'vuelidate/lib/validators'
    export default {
        name: 'FormInward',
        validations: {
            indate: {required}
        },  
        data: function(){
            return {
                indate: ''
            }
        },          
        methods: {
            validationStatus: function(validation){
                return typeof validation != "undefined" ? validation.$error : false;
            },
            submit: function() {
                this.$v.$touch();
                if (this.$v.$pendding || this.$v.$error) return;
                console.log(this.$v);
            }
        }
    }
    </script>

но я не могу использовать vuelidate, он показывает ошибку, например, свойство $ v было получено во время рендеринга, но не определено в экземпляре. когда я проверяю с помощью console.log (this. $ v) - отображается undefined


vue.js vuelidate
person Prem Kumar    schedule 07.03.2021    source источник
comment
ты пробовал мое решение? Вам это помогает?   -  person Jebasuthan    schedule 14.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

В vue3 вы не должны использовать с $ v, вместо этого у вас есть экспорт useVuelidate с новыми значениями ключей, значения которых должны использоваться в вашем компоненте. Ключевое слово тоже не должно начинаться с символа $.

Шаг 1. Импортируйте vuelidate внутри компонента.

import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

Шаг 2. Инициализируйте Vuelidate.

setup () {
    return { v$: useVuelidate() }
},

Шаг 3. Добавьте модель

data () {
    return {
      indate: ''
    }
},

Шаг 4: Добавьте проверку

validations () {
    return {
      indate: { required }, // Matches this.indate
    }
},

Шаг 5. Добавлены методы действий формы

methods: {
    validationStatus: function(validation){
      if (validation) {
        return validation.$error
      } else {
        return false
      }
    },
    submit: function() {
      this.v$.$touch();
      if (this.v$.$error) return;
      console.log(this.v$);
    }
}

Шаг 6. HTML-шаблон будет

<template>
  <form methos="post" v-on:submit.prevent="submit">
    <input
      type="text"
      v-model="indate"
      class="form-control mt-2 mb-2"
      placeholder="DD/MM/YYYY"
      :class="{'is-invalid': validationStatus(v$.indate)}"
    />
    <div v-if="v$.indate.$error" class="invalid-feedback">
      Inward date is required.
    </div>
  </form>
</template>

ДЕМО

person Jebasuthan    schedule 09.04.2021