代码之家 › 专栏 › 技术社区 › Oliver Williams

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

vue-reactivity vue.js

1

Oliver Williams · 技术社区 · 6 年前

在这种情况下,我需要从Vuejs外部触发Vuejs托管组件中的更改。

我发现通过触发或调用复选框,我可以很容易地在复选框上执行此操作 click() 属性,但我不能对 input[type=text] 或A select 元素。

J小提琴是 here

我已经查阅了Vuejs文档中关于反应性如何工作的内容,但不知道如何在这里实现。我该怎么做?

1 回复 | 直到 6 年前

1

Jacob Goh 6 年前

您可以将Vue实例保存在全局变量中( window.vueApp = new Vue({...}) )首先,做一些像 vueApp.dataValue = ...

编辑了你的小提琴: https://jsfiddle.net/jacobgoh101/q2zv5gz1/6/

将Vue实例保存在全局变量中

window.vueApp = new Vue({ ...

在里面点击:

  <!-- 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'));

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