Как я могу получить доступ к вычисляемому свойству ошибок в пользовательском компоненте ввода, проверенном с помощью vee-validate?

Я пытаюсь использовать VeeValidate в настраиваемом компоненте ввода.

Я пробовал использовать $emit на @input и @blur, но проверка происходит на следующем тике, и я не могу поймать проверку на событии.

  onEvent (event) {
    console.log('error length', this.errors.items.length)
    if (this.errors.items.length) {
      this.hasError = true
      this.$emit('has-error',this.errors.items)
    } else {
      this.hasError = false
      this.$emit('on-input', event)

    }
  }

Я также попытался внедрить валидатор из родительского элемента, чтобы иметь возможность напрямую получить доступ к вычисляемому свойству ошибок, но между родительской страницей и самим пользовательским компонентом ввода может быть 1-2-3 уровня вложенности. Мне пришлось бы внедрить валидатор через все из них, и этот компонент предназначен для повторного использования.

 export default {
   //in custom input component
   inject: ['$validator'],
 }

Лучшая идея, которую я получил, - это наблюдать за вычисляемым свойством ошибок и генерировать событие, когда происходит изменение с ошибками в этом экземпляре компонента.

watch: {
  errors: function (errorsNew) {
    console.log('errors watch',errorsNew)
  }
},

Проблема в том, что я не могу наблюдать за вычисляемым свойством ошибок, введенным vee-validate.

Некоторая упрощенная версия кода:

родитель

<template>
  <div id="app">

    <CustomInput
      :label="'Lable1'"
      :value="'value from store'"
      :validations="'required|max:10|min:5'"
      :name="'lable1'"
    />
    <button>Save</button>
  </div>
</template>

<script>
import CustomInput from "./components/CustomInput";

export default {
  name: "App",
  components: {
    CustomInput
  }
};
</script>

CustomInput

<template>
   <div>
     <label >{{ label }}</label>
     <input :value="value" :name="name" v-validate="validations">
     <span v-if="this.errors.items.length">{{this.errors.items[0].msg}}</span>
  </div>

</template>

<script>
export default {
  name: "HelloWorld",

  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: ""
    },
    validations: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      required: true
    }
  },

  watch: {
    errors: function(errorsNew) {
      console.log("errors watch", errorsNew);
      this.$emit('has-error')
    }
  }
};
</script>

Может ли кто-нибудь помочь мне получить доступ к ошибкам проверки из пользовательского ввода?

Обновлять

Я создал простую скрипку, если кому-то будет легче ее протестировать https://codesandbox.io/s/mqj9y72xx


javascript validation vue.js vuejs2 vee-validate
person Vlad    schedule 15.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что лучший способ справиться с этим - ввести $validator в дочерний компонент. Кажется, плагин рекомендует это делать именно так: https://baianat.github.io/vee-validate/advanced/#injecting-parent-validator.

Итак, в свой CustomInput вы должны добавить inject: ['$validator'],.

Затем в App.vue вы можете указать это в шаблоне:

<div>
  These are the errors for "lable1" in App.vue:
     <span v-if="errors.has('lable1')">{{errors.first('lable1')}}</span>
</div>

Я думаю, что это действительно так.

Рабочий пример, основанный на вашем примере: https://codesandbox.io/s/pw2334xl17

Я понимаю, что вы уже рассмотрели это, но метод inject выполняет поиск в дереве компонентов, пока не найдет экземпляр $ validator, поэтому, возможно, вам следует отключить автоматическую инъекцию в своем приложении на корневом уровне, чтобы каждый компонент, ищущий валидатор, inject все получат это. Вы можете сделать это, используя:

Vue.use(VeeValidate, { inject: false });

person Ryley    schedule 18.06.2018
comment
работает только для одного текстового поля, если вы дублируете компонент (также с новым именем) и делаете ошибку в одном компоненте, ошибка отображается на всех компонентах. - person Gregor Voinov; 25.04.2019
comment
какое решение для v3？ больше никаких инъекций в v3 - person LiangWang; 09.10.2020