Vee-validate：如何使用验证道具回调

Question

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

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

但是，我也尝试过使用 ValidationProvider 提供的 "validate" props 回调，但是没有成功。是否可以将其用于我所描述的逻辑？

我当前的代码：

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

Answer 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);
  }
  /...
}

Vee-validate：如何使用验证道具回调

Vee-validate: how use validate props callback

validation

vue.js

vee-validate