Vee-validate：如何使用 validate props 回调答案

【问题标题】：Vee-validate: how use validate props callbackVee-validate：如何使用 validate props 回调
【发布时间】：2020-07-28 08:16:03
【问题描述】：

我正在使用 vee-validate 来验证输入。验证是自定义的，就好像输入无效一样，会显示一个模态并重置输入值。

我已经设法实现了这个逻辑，在 @change 输入事件的处理程序中调用了 this.$refs.provider.validate(value)。

但是，我也尝试使用 ValidationProvider 提供的“验证”道具回调，但可惜没有成功。可以将其用于我描述的逻辑吗？

我当前的代码：

<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>

【问题讨论】：

标签： validation vue.js vee-validate

【解决方案1】：

你可以！

从 VP 插槽中取出 validate，并将其传递给您的 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);
  }
  /...
}

【讨论】：