Проверка флажка Vuelidate - PullRequest
Новая
       10

Проверка флажка Vuelidate

0 голосов
/ 06 июля 2018

Я использую Vue.js, и я новичок в этом. В настоящее время я работаю над проверкой. Я использовал Vuelidate в качестве моей библиотеки валидации. Я успешно выполнил проверку формы, но возникла проблема, когда мне пришлось проверить флажок проверки.

Как проверить флажок? Кроме того, я использовал bootstrapvue для отображения флажка. 

   <b-col lg="6" md="6" sm="6">
      <label>Bus Route</label>
      <b-form-group>
        <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         v-bind:unchecked-value="$v.selectedRoute.$touch()">
          {{route.text}}</b-form-checkbox>
      </b-form-group>
      <div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
        Field is required
      </div>
    </b-col>

validations: {

      selectedRoute: {
        required
      },
}

Ответы [ 2 ]

0 голосов
/ 02 июня 2019

Я надеюсь, что этот маленький пример поможет вам понять, как проверить флажок. Вы должны проверить, когда вход меняется. Я рекомендую вам использовать @change.

В шаблоне 

<div class="input">
  <label for="country">Country</label>
  <select id="country" v-model="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
    <option value="germany">Germany</option>
  </select>
</div>
<div class="input inline" :class="{invalid: $v.terms.$invalid}">
  <input type="checkbox" id="terms" v-model="terms" @change="$v.terms.$touch()">
  <label for="terms">Accept Terms of Use</label>
</div>

Таким образом, условия будут действительны, если выбранная страна будет Германия. 

validations: {
  terms: {
    checked(val) {
      return this.country === "germany" ? true : val;
    }
  }
}

конечно страна, термины определены в data (): 

country:'',
terms: false
0 голосов
/ 06 июля 2018

Вы должны связать методы @change: 

 <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         @change="$v.selectedRoute.$touch()">

и вы можете использовать пользовательскую функцию: 

selectedRoute: {
  checked (val) {
    return val
  }
},
...