Vuetify: флажок показывает, что статус проверен, когда он не отмечен, и наоборот - PullRequest
Новая
       46

Vuetify: флажок показывает, что статус проверен, когда он не отмечен, и наоборот

0 голосов
/ 24 сентября 2018

Позвольте мне упростить проблему:

У меня есть флажок в моем шаблоне Vue.js (с использованием компонентов Vuetify): 

<v-checkbox 
   v-model="selected" 
   label="John"
   value="John"
   id ="john" 
   @click.native="checkit">
</v-checkbox>

Код метода checkit(): 

checkit: function() {
  let elt = document.getElementById('john')
  if(elt.checked) {
    console.log('checked')
  } else {
    console.log('unchecked')
  }
}

Но я получаю противоположный результат: когда он проверяется, он говорит, что он не проверен, и наоборот.

Что вызывает это и как это исправить?

Codepen demo

1 Ответ

0 голосов
/ 24 сентября 2018

console.log, который вы получаете, срабатывает перед установкой или снятием флажка.Вот что происходит:

  1. Пользователь нажимает на флажок
  2. Javascript выполняет слушатель
  3. Если событие не отменено ни в одном из слушателей,он продолжает и устанавливает флажок как установленный или не отмеченный.

То, что вы можете использовать, это прослушивание события change: https://codepen.io/anon/pen/VGOMPB?editors=1011

Второе, что с помощьюdocument.getElementById('john') Вы полагаетесь на DOM, чтобы проверить, установлен флажок или нет.Почему вы не полагаетесь на собственность selected?DOM обновляется после того, как весь JS был выполнен, чтобы избежать слишком частого обновления DOM.Если вы хотите дождаться обновления DOM, вы можете использовать помощник $nextTick: https://codepen.io/anon/pen/BOewpg?editors=1011

checkit: function () {
    this.$nextTick(() => {
        let elt = document.getElementById('john')
        if(elt.checked) {
            console.log('checked')
        } else {
            console.log('unchecked')
        }
    })

    //this.selected.push('Vuejs')
    //this.selected.push('Paris')
}
...