Vee-validate: как использовать validate реквизит обратного вызова - PullRequest
Новая
       40

Vee-validate: как использовать validate реквизит обратного вызова

1 голос
/ 15 апреля 2020

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

Мне удалось реализовать эту логику c, вызвав ее. $ Refs.provider.validate (value) внутри обработчика события ввода @change.

Однако я также пытался использовать обратный вызов «validate», предоставляемый ValidationProvider, но, увы, безуспешно. Можно было бы использовать это для логики c, подобной той, что я описал?

Мой текущий код: 

<template>
  <div>
    <ValidationProvider
      :rules="rules"
      v-slot="{ errors, valid }"
      ref="provider"
      :name="name"
      slim
    >
      <b-form-input
        ref="inputField"
        :value="inputValue"
        :key="inputKey"
        @change="changeInput"
        v-bind="$attrs"
        :placeholder="name"
        :state="errors[0] ? false : valid ? true : null"
        lazy
        type="number"
      />
    </ValidationProvider>
    <div>
      <b-modal hide-header ok-only :id="modalId">
        Modal body
      </b-modal>
    </div>
  </div>
</template>

<script>
import { ValidationProvider } from "vee-validate";
export default {
  components: {
    ValidationProvider,
  },
  props: {
    inputIndex: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    rules: {
      type: [String, Object],
      default: "",
    },
  },
  data() {
    return {
      inputKey: 0,
      modalId: "modal" + this.inputIndex,
    };
  },
  computed: {
    inputValue: function () {
      return this.$store.getters["form/getMisuraN"](this.inputIndex);
    },
  },
  watch: {},
  methods: {
    changeInput: async function (value) {
      await this.updateinput(value);
      //other logic not relevant to the issue
    },
    async updateinput(value) {
      const { valid } = await this.$refs.provider.validate(value);
      if (!valid) {
        value = "";
        this.$bvModal.show(this.modalId);
      }
      this.$store.dispatch("setInputValue", {
        index: this.inputIndex,
        value: value,
      });
      this.inputKey++;
    },
  },
};
</script>

Что я хотел бы сделать: 

<template>
  <div>
    <ValidationProvider
      :rules="rules"
      v-slot="{ errors, valid, validate }"
      ref="provider"
      :name="name"
      slim
    >
[...]
</template>

<script>
[...]
 methods: {
// use the validate function instead of calling this.$refs.provider.validate(value) inside the // @change handler method
}
</script>

1 Ответ

1 голос
/ 15 апреля 2020

Вы можете!

Получить validate из слота для VP и передать его в событие changeInput: 

   <ValidationProvider
      :rules="rules"
      v-slot="{ errors, valid, validate }"
      ref="provider"
      :name="name"
      slim
    >
      <b-form-input
        ref="inputField"
        :value="inputValue"
        :key="inputKey"
        @change="changeInput($event,validate)"
        v-bind="$attrs"
        :placeholder="name"
        :state="errors[0] ? false : valid ? true : null"
        lazy
        type="number"
      />
    </ValidationProvider>

Затем в функции changeInput вы сделать что-то вроде этого: 

changeInput: async function (value,validate) {
  await this.updateinput(value,validate);
  //other logic not relevant to the issue
},
async updateinput(value,validate) {
  const { valid } = await validate(value);
  if (!valid) {
    value = "";
    this.$bvModal.show(this.modalId);
  }
  /...
}
...