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

Posted 2023-02-22

【中文标题】如何更新以编程方式更改的元素的 v-model？

【英文标题】：How update v-model of a element that is changed programatically?

【发布时间】：2018-09-17 15:19:42

【问题描述】：

我正在为 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)

【问题讨论】：

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

【参考方案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 事件也可能触发其他类型元素的更新。}

【讨论】：

dispatchEvent(new Event('change')) 也适用于 <select> 元素 :)