如何在 VueJS 中外部触发下拉菜单的反应性

Question

在某些情况下，我需要从 VueJS 外部触发 VueJS 管理的组件的更改。

我发现我可以通过触发或调用复选框的 click() 属性轻松地在复选框上执行此操作，但我无法使用 input[type=text] 或一个 select 元素。

jsfiddle 是 here

我查看了有关反应性如何工作的 VueJS 文档，但不明白如何在此处实现它。我该怎么做？

Answer 1

您可以先将 Vue 实例保存在全局变量 (window.vueApp = new Vue({...})) 中，然后通过执行 vueApp.dataValue = ...

之类的操作来更改值

编辑了您的 fiddle：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 活动适用于 select

document.getElementById('select').dispatchEvent(new Event('change'));

input 事件适用于文本

document.getElementById('text').dispatchEvent(new Event('input'));

注意： 这可能无法在不同的浏览器中可靠地工作。因为这是试图以编程方式模拟用户操作。我认为不同的浏览器会以不同的方式处理用户操作。

如何在 VueJS 中外部触发下拉菜单的反应性

how to externally trigger reactivity in VueJS for a dropdown menu

vue.js

vue-reactivity