如何更新以编程方式更改的元素的 v-model？

Question

我正在为 Checkbox 使用 JS 插件。

这个插件创建了一个模拟复选框状态的开关按钮。

当切换按钮被切换时，它会更改复选框的checked 值。

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

但是，activedata 值仅在用户单击复选框时更新。以编程方式更改复选框 checked 属性不会触发 vue。

当以编程方式更改输入时，如何更新 vue data？例如$("#myinput").prop("checked",true)

Answer 1

每当触发change* 事件时，Vue 都会更新v-model 的属性。触发它：

$("#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 事件也可能触发其他类型元素的更新。}