В Vue, как отменить флажок на основе условия?

В Vue, как отменить флажок на основе условия?

10.10.2017 07:38:09 Просмотров 21 Источник

Я хочу, чтобы всегда был хотя бы один флажок, но я смешиваю понятия v-modelи :checked.

Доктор говорит::

v-modelбудет игнорировать начальное value, checkedили selectedатрибуты встречается на любых элементах формы. Он всегда будет обрабатывать данные экземпляра Vue как источник истины.

Я могу предотвратить мои модели, чтобы быть изменены, но я не могу предотвратить этот флажок, чтобы быть проверены...

Некоторый код:

Шаблон

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>

Модель userOutputSeries

data () {
  return {
    userOutputSeries: {
      foo: {
        display: 'Awesome Foo',
        active: true
      },
      bar: {
        display: 'My Bar',
        active: false
      }
    }
  }
}

В preventIfLessThanOneChecked обработчик

preventIfLessThanOneChecked (event) {
  // I don't update the model so it stay at the same state
  // But only need to count the active series and do what we want.
  console.log(event.target.value, event.target.checked)
}

Есть идеи остановить распространение родного флажка?

У вопроса есть решение - Посмотреть?

Ответы - В Vue, как отменить флажок на основе условия? / In Vue, how to cancel a checkbox based on a condition?

Sui Dream

10.10.2017 07:44:36

Попробуйте использовать disabledна вашем единственном отмеченном флажке:

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id"
      :disabled="(s.active && numberOfChecked == 1) ? disabled : null"
      @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>
https://stackoverflow.com/questions/46671725/in-vue-how-to-cancel-a-checkbox-based-on-a-condition/46671854#comment80314943_46671854
Я буду использовать атрибут disabled, в сочетании с @thanksd ответ, чтобы добавить некоторые дополнительные стиль. Ваше решение также работает. Спасибо!
Является ответом!
thanksd

10.10.2017 07:51:34

Вы должны использовать v-modelвместо:checked, чтобы изменения в userOutputSeriesданных userOutputSeries отражались во входном поле checkbox.

Затем передайте sВ метод и установите v-forобъекта в active, если нет trueфлажков:

active
new Vue({
  el: '#app',
  data() {
    return {
      userOutputSeries: {
        foo: {
          display: 'Awesome Foo',
          active: true
        },
        bar: {
          display: 'My Bar',
          active: false
        }
      }
    }
  },
  methods: {
    preventIfLessThanOneChecked(item) {
      if (item.active) {
        return;
      }
    
      let items = Object.values(this.userOutputSeries);
      if (!items.find(i => i.active)) {
        item.active = true;
      }
    }
  }
})

https://stackoverflow.com/questions/46671725/in-vue-how-to-cancel-a-checkbox-based-on-a-condition/46671971#comment80314581_46671971
Я застрял с предотвращением события вместо того, чтобы думать о данных... Спасибо!
Jaskaran Singh

17.10.2019 07:16:35

В приведенном выше ответе, данном @thanksd, мой флажок остается непроверенным. Поэтому я пишу свое решение.

Это мой оператор цикла, измените имена переменных в соответствии с вашим файлом.

v-for="column in tableColumns"

Это мой ввод ( если visible-true, то флажок установлен )

<input type="checkbox" v-model="column.visible" @change="event => visibleColumnsChanged(column, event)">

Затем в моем методе изменения - если нет видимого элемента слева, установите столбец.видимый для истинного - использовать событие.цель.checked = true, чтобы снова установить флажок.

visibleColumnsChanged: function(column, event){
  if (column.visible) {
    return;
  }

  if(! this.tableColumns.find(c => c.visible)){
    column.visible = true;

    event.target.checked = true;
  }
}
https://stackoverflow.com/questions/46671725/in-vue-how-to-cancel-a-checkbox-based-on-a-condition/58436907#comment106502439_58436907
Tnx много, это должно быть принято ответ, так как при выполнении un-check, но затем изменение значения v-модели прагматически обратно к "true" , флажок будет игнорировать это и оставаться непроверенным, даже если модель мысли на самом деле истинна. Такое поведение может произойти, когда вы хотите всегда иметь один флажок снят. Только это " событие.цель.проверено " магия на самом деле очень помогла tnx. Другой способ обойти это было бы на самом деле скрыть флажок, когда он последний раз снят, так что пользователь не может сделать это также.
https://stackoverflow.com/questions/46671725/in-vue-how-to-cancel-a-checkbox-based-on-a-condition/58436907#comment106505306_58436907
Рад слышать, что это помогло @JiroMatchonson
Закрыть X