VueJs 2 - Принудительное значение DOM флажка для соответствия значению данных - PullRequest
Новая
       111

VueJs 2 - Принудительное значение DOM флажка для соответствия значению данных

0 голосов
/ 03 октября 2019

Я не могу за всю жизнь понять это.

Fiddle at: https://jsfiddle.net/s8xvkt10/

Я хочу

  1. Пользовательclickbox checkbox
  2. Затем на основе отдельных условий
  3. Checkbox calculatedCheckedValue возвращает свойство данных / v-модель true / false
  4. И проверенное состояние отражает вычисленноеCheckedValue

Я могу получить:

  1. calculatedCheckedValue правильно вычисляет и интерполирует

Но я не могу в:

  1. Наличие атрибута: selected отображает calculatedCheckedValue правильно в DOM
  2. например, если установлен флажок false и calculatedCheckedValue по-прежнему возвращает false, флажок переключается на экране между отмеченным и не отмеченным

Я пробовал:

  1. Использование v-model с пользовательским set который выполняет вычисления и устанавливает локальное состояние, которое пользовательский get возвращает
  2. Имитация v-модели с использованием @change.prevent.stop="updateCalculatedValue" и :checked="calculatedValue"
  3. Предполагая @changeпроисходит после @click (что я считаю неправильным) и использования @click.prevent.stop="updateCalculatedValue" и :checked="calculatedValue"

Модель работает и отображает вычисленное значение в виде строки в диапазоне DOM, нопроверенное значение не соответствует значению модели

Может кто-нибудь помочь мне?

1 Ответ

0 голосов
/ 05 октября 2019

Я решил проблему по адресу: https://jsfiddle.net/pc7y2kwg/2/

Насколько я могу судить, событие нажатия вызывается даже событиями клавиатуры ( src )

И происходит до событий @change или @input ( src )

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

//HTML Template            
<input :checked="calculatedValue5" @click="correctAnswer" type="checkbox">


//VUE component

data() {
    return {
      calculatedValue5: false,
    };
},      

methods: {
    correctAnswer(e){
            const newDomValue = e.target.checked;
            this.calculatedValue5 = this._calculateNewValue(newDomValue);
            if(this.calculatedValue5 !== newDomValue){
                e.preventDefault();
            }
        }
}

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

...