В Vue как установить флажки в зависимости от его значения? - PullRequest
2 голосов
/ 13 марта 2020

Я чередую чекбоксы для создания селектора, который имеет значение от А1 до А10. У меня также есть массив в свойстве data, определяющий значения, которые я бы хотел отключить. Если значение внутри этого массива равно значению флажка, его следует отключить. Я могу только получить доступ к значению флажка, когда он был проверен. Как я могу получить значение каждого флажка?

<span class="seat" v-for="n in 10" :key="n">
  <label class="checkbox-label">
    <input
    class="checkbox-input"
      type="checkbox"
      v-model="selected"
      :value="'A' + n"
      @change="check($event)"
      :disabled="isDisabled" 
      true-value="1" false-value="0"
      number> {{ n }} 
      <span class="checkmark"></span>
  </label>
</span>

data() {
  return {
    selected: [],
    disabled: ['A1', 'A2', 'A9']
  }
},
computed: {
  isDisabled() {
    // limit seats picked to number of tickets chosen
    if (this.selected.length > (this.totalTickets - 1)) {
      return true
    } else {
      return false
    }
  },
},
mounted: function() {
  //disable checkboxes here?
},

1 Ответ

2 голосов
/ 13 марта 2020

Попробуйте получить $event целевое значение и проверить, включено ли оно в массив disabled:

 :disabled="disabled.includes($event.target.value)" 

или добавьте метод с n в качестве параметра:

 :disabled="disable(n)"

в методах:

computed:{
 ....
},
methods:{
  disable(n){
   return this.disabled.includes('A'+n);
}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...