Question

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

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

但是，我也尝试过使用ValidationProvider提供的“ validate”道具回调，但遗憾的是没有成功。可以将它用于像我描述的那样的逻辑吗？

我当前的代码：

<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验证：如何使用验证道具回调

1 个答案: