我的应用程序场景摘要：我创建了一个可以使用不同Web应用程序的Vuejs应用程序 . 任何网页中包含的Vuejs应用程序脚本将替换集成网页上的div元素以及页面上用户的某些操作，Vuejs应用程序呈现对隐藏输入字段的响应，Web应用程序应该监听这些隐藏字段上的任何更改事件确定对响应的任何更改

问题：

Vuejs实例中的侦听器不会捕获在Vuejs应用程序内触发的本机DOM事件

我在Vuejs应用程序中触发输入字段上的本机DOM更改事件，并使用{this . $ refs}在元素上触发它们以引用实际DOM元素，然后在集成网页上添加侦听器以用于任何更改事件但是侦听器未触发在IE和Firefox中虽然一切都按照预期在chrome中工作 .

有人可以建议我解决这个问题的任何解决方案吗？

我知道在Vue实例外部使用“vm . $ on”进行监听，但我希望将客户端集成接口保持在框架内，并使用本机dom监听器来识别对输入字段的任何更改 .

这是代码示例代码来解释

发现相关问题但不适用于此案例：

Is it possible to trigger events using Vue.js?

应用程序组件： - 添加了一个隐藏文本字段和一个按钮，该按钮使用javascript更改文本字段的值，而javascript又会触发隐藏字段上的更改事件 .

网页：所以当我试图在网页上监听更改事件时，虽然使用javascript通过本机事件在Vuejs应用程序内触发更改事件，但是侦听器不会触发

<!DOCTYPE html>
<html>
<head title = "TestPage">
<script>
  document.addEventListener('DOMContentLoaded', 
      function (event) {
         var element = document.getElementById("test-field");
         element.addEventListener('change', function () {
         console.log("Change event captured")
      })
  })
</script>
</head>
<body>
<input id = "divelementidtoreplace" type = "text" >
</body>
</html>

<template>
  <div id="app">
      <input type="hidden" id = "test" v-model = 'value' ref="inputFieldToListen">
       <button @click= "changeHiddenInputFieldvalue()" > click to change the text  </button >
  </div>
</template>

<script>


export default {
  name: 'App',
  data: {
    value: ''
  }
  methods: {
    changeHiddenInputFieldvalue: function () {
        this.value = 'This assigned can put random value to test the trigger';
    },
    triggerChangeEvent: function (element) {
      if (element) {
        if ('createEvent' in document) {
          var evt = document.createEvent('HTMLEvents')
          evt.initEvent('input', true, true)
          element.dispatchEvent(evt)
        }
      }
    }
  },
  watch: {
    value: function (NewValue, oldValue) {
      this.triggerChangeEvent(this.$refs.inputFieldToListen)
    },
  }
}
</script>

main.js： -

import Vue from 'vue'
import App from './App.vue'

var vueInstance = new Vue({
  el: '#app',
  data: {

  },
  template: '<App />',
})
javascript html dom vuejs2