@input 이벤트 실행 메서드 전에 값 프로펠러를 확인하시겠습니까?VeValidate/Vue

@input 이벤트 실행 메서드 전에 값 프로펠러를 확인하시겠습니까?VeValidate/Vue

코드 샌드박스(정확한 예)

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

위의 예에서 입력 필드에 잘못된 값을 입력하면 유효성 검사 상태가 반환됨Valid == true, 그러나 그것은 되돌아와야 한다.false.

이런 일이 일어나는 것은 그 때문에 일어나는 것으로 알고 있다.@input이벤트 방법(event method)resize)은 먼저 실행된 다음 값을:value. 즉,vee-validate이벤트가 발생하기 전에 기존 값을 확인하십시오.

입력 값을 먼저 검증한 다음 메서드를 실행하도록 수정하는 방법을 잘 모르십시오!

문제를 복제하는 방법:

1. 콘솔 열기
2. 값 변경width5까지 전진하다
3. 필드 아래에 오류 메시지가 성공적으로 표시되지만, 메서드가 완료된 후 필드가 유효하지 않더라도 콘솔의 유효 플래그가 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>

사용하지 않을 경우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;
  });
}

유효성을 검사한 콜백에서result결과가 유효한지 여부 및 실패한 규칙(인)을 포함하는 개체result.failedRules배열의 오류 메시지(인) 및result.errorshttps://codesandbox.io/s/veevalidate-components-vuetify-ynll5을 참조하십시오.

참조URL: https://stackoverflow.com/questions/60468953/validate-value-prop-before-method-on-input-event-runs-veevalidate-vue