javascript - 在 @input 事件的方法运行之前验证 value prop？ Vee验证/Vue

Question

带有具体示例的代码沙箱

https://codesandbox.io/s/veevalidate-components-vuetify-iftco

在上面的示例中，当我在输入字段中输入错误的值时，验证状态返回 Valid == true，但它应该返回 false。

我知道发生这种情况是因为 @input 事件方法 (resize) 将首先运行，然后它将值分配给 :value。换句话说，vee-validate 在触发事件之前检查现有值。

不确定如何修复它以便首先验证输入值然后运行该方法!

如何重现问题:

1. 打开控制台
2. 将 width 字段的值更改为 5
3. 您将在该字段下成功收到一条错误消息，但控制台中的 Valid 标志设置为 true，即使该字段在该方法完成后无效。

我不确定如何解决这个问题。我已经尝试了几个小时..

<template>
  <v-app>
    <v-row>
      <v-col v-for="(value, key) in fixture.dimensions" :key="key">
        <ValidationProvider
          :rules="`between:${fixture.limits[key].min},${fixture.limits[key].max}`"
          v-slot="{ errors, valid }"
        >
          <v-text-field
            :value="fixture.dimensions[key]"
            @input="resize(key, valid)"
            :label="key"
            ref="key"
            :min="fixture.limits[key].min"
            :max="fixture.limits[key].max"
            :error-messages="errors"
            outlined
            type="number"
          ></v-text-field>
        </ValidationProvider>
      </v-col>
    </v-row>
  </v-app>
</template>

<script>
import { ValidationProvider } from "vee-validate";

export default {
  name: "App",
  components: {
    ValidationProvider
  },
  data: () => ({
    fixture: {
      dimensions: {
        width: 1000,
        height: 1500
      },
      limits: {
        width: {
          min: 300,
          max: 1500
        },
        height: {
          min: 300,
          max: 1500
        }
      }
    }
  }),
  mounted() {
    console.log(this.fixture);
  },
  methods: {
    resize(key, valid) {
      console.log("valid?", valid);
      this.fixture.dimensions[key] = event.target.value;
      // this.fixture.iconObject.resize()
    }
  }
};
</script>

Answer 1

如果您没有使用v-model 来管理输入，您应该自己显式调用validate，如下所示:

   <ValidationProvider
      :rules="`between:${fixture.limits[key].min},${fixture.limits[key].max}`"
      v-slot="{ errors, valid, validate }"
    >
      <v-text-field
        :value="fixture.dimensions[key]"
        @input="resize(key, $event, validate)"
        ...
      ></v-text-field>
    </ValidationProvider>

resize(key, value, validate) {
  validate(value).then(result => {
    console.log("valid???");
    console.log(result.valid);

    //either way update value
    this.fixture.dimensions[key] = value;
  });
}

在 validate 的回调中，您会得到一个 result 对象，其中包括结果是否有效，以及哪些规则失败(在 result.failedRules 中)和任何错误数组中的消息(在 result.errors 中)。看到它在这里工作: https://codesandbox.io/s/veevalidate-components-vuetify-ynll5