Vee проверить, как проверять переключатели - PullRequest
Новая
       156

Vee проверить, как проверять переключатели

1 голос
/ 05 августа 2020

Из доступных правил VeeValidate вы можете подтвердить выбор с помощью oneOf Правила VeeValidate 

<ValidationProvider rules="oneOf:1,2,3" name="number" v-slot="{ errors }">
  <select v-model="value">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four (invalid)</option>
  </select>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Но я не знаю, как это сделать с помощью переключателей 

<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
    <label>
      <input type="radio" value="1" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="2" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="3" v-model="choice">
      One
    </label>
                
   <span>{{ errors[0] }}</span>
   </ValidationProvider>

Я использую nuxt 

import { extend } from 'vee-validate';
import { oneOf } from 'vee-validate/dist/rules';

// Add the required rule
extend('oneOf ', {
  ...oneOf ,
  message: 'Choose one'
});

данные и компонент 

data () {
      return {
        choice: ''
  }
}

components: {
    ValidationObserver: ValidationObserver,
    ValidationProvider: ValidationProvider
  },

VeeValidate работает со всеми другими входами

1 Ответ

1 голос
/ 12 августа 2020

Отредактировано

Я делаю это так, чтобы обернуть ValidationProvider вокруг последнего радиовхода. Примерно так: 

<label>
  <input type="radio" value="1" v-model="choice">
    One
</label>
<label>
  <input type="radio" value="2" v-model="choice">
    Two
</label>
<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
  <label>
    <input type="radio" value="3" v-model="choice">
      Three
   </label>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Раньше я оборачивал validationProvider вокруг каждого радиовхода, но обнаружил, что если несколько validationProvider используют одно и то же имя, только последний фактически проверяется.

...