Проверить значение prop перед выполнением метода при событии @input? VeeValidate / Вью - PullRequest
Новая
       42

Проверить значение prop перед выполнением метода при событии @input? VeeValidate / Вью

3 голосов
/ 29 февраля 2020

Код Песочница с точным примером

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>

1 Ответ

0 голосов
/ 02 марта 2020

Если вы не используете 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

...