有一种情况我需要从VueJS外部触发VueJS管理组件的更改。
我发现我可以通过触发或调用其click()
属性轻松地在复选框上执行此操作,但我无法使用input[type=text]
或{{1元素。
jsfiddle是here
我已经查看了VueJS文档中关于反应性如何起作用但不了解如何在这里实现它。我该怎么做?
答案 0 :(得分:0)
您可以先将Vue实例保存在全局变量(window.vueApp = new Vue({...})
)中,然后通过vueApp.dataValue = ...
编辑你的小提琴:https://jsfiddle.net/jacobgoh101/q2zv5gz1/6/
将Vue实例保存在全局变量中
window.vueApp = new Vue({ ...
和onclick内部:
<!-- totally unrelated to Vue! -->
<button onclick="vueApp.selectValue = vueApp.selectValue === 'alpha' ? 'beta' : 'alpha' " >
change select
</button>
<button onclick="vueApp.checkboxValue = !vueApp.checkboxValue" >
change checkbox
</button>
<button onclick="vueApp.textValue = Math.random()">
change input
</button>
<强>更新强>
如果你想要一种方法,其中元素应该不知道如何实现Vue,你必须找到一种方法以编程方式正确触发输入元素上的输入事件。
要触发事件,您可以使用
.dispatchEvent(new Event('eventname'));
玩完之后:https://jsfiddle.net/jacobgoh101/q2zv5gz1/7/
change
事件适用于选择
document.getElementById('select').dispatchEvent(new Event('change'));
input
事件适用于文字
document.getElementById('text').dispatchEvent(new Event('input'));
注意:这可能无法在不同的浏览器中可靠地运行。因为这是尝试以编程方式模拟用户操作。我认为不同的浏览器会以不同的方式处理用户操作。