Как обновить v-модель элемента, который изменяется программно?

avatar
Daniel Santos
7 апреля 2018 в 22:02
3316
1
5

Я использую подключаемый модуль JS для Checkbox.

Этот подключаемый модуль создает кнопку переключения, которая имитирует состояние флажка.

При переключении кнопки переключателя изменяется значение checked флажка. 

<input type="checkbox" v-model="active" class="switch">
<script>
    var app = new Vue({
        el: '#app',
        data: {
            active: false
        }
    })
</script>

Однако значение данных active обновляется только тогда, когда пользователь устанавливает флажок. Программное изменение атрибута флажка checked не приводит к запуску vue.

Как я могу обновить vue data при программном изменении ввода? например $("#myinput").prop("checked",true)

Источник
connexo
7 апреля 2018 в 22:41
0

Этот подключаемый модуль создает кнопку переключения, которая имитирует состояние флажка. <-- Этого можно добиться только с помощью собственного флажка и некоторого интеллектуального CSS.

Ответы (1)

avatar
acdcjunior
7 апреля 2018 в 22:07
7

Vue обновляет свойство v-model всякий раз, когда запускается событие change*. Активировать:

$("#myinput").prop("checked", true);
$("#myinput")[0].dispatchEvent(new Event('change')); // must trigger NATIVE event

Демо:

new Vue({
  el: '#app',
  data: {
    active: false
  }
});

$("#via-jq").click(function() {
  let currChecked = $("#myinput").prop("checked");
  $("#myinput").prop("checked", !currChecked);
  $("#myinput")[0].dispatchEvent(new Event('change'));
})
<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id="app">
  <input id="myinput" type="checkbox" v-model="active" class="switch"> {{ active }}
</div>

<button id="via-jq">Toggle Via jQ</button>

* Это относится к checkboxes. Событие зависит от типа ввода. Например. Событие input может инициировать обновление и для других типов элементов.

1_bug
15 октября 2021 в 10:38
0

dispatchEvent(new Event('change')) работает и для элемента <select> :)