Question

我的应用程序场景摘要：我创建了一个Vuejs应用程序，可以与其他Web应用程序一起使用。任何网页中包含的Vuejs应用程序脚本都将替换集成网页时以及用户在页面上执行某些操作时的div元素，Vuejs应用程序将对隐藏的输入字段进行响应，并且Web应用程序应侦听那些隐藏的字段上的任何更改事件，确定对响应的任何更改

问题：

在Vuejs应用程序内部触发的本地DOM事件不会被Vuejs实例外部的侦听器捕获

我在Vuejs应用程序中触发的输入字段上具有本机DOM更改事件，并且还使用{this。$ refs}来触发它们，以引用实际的DOM元素，然后在集成网页上添加了侦听器，用于侦听器之外的任何更改事件尽管一切都在chrome中按预期运行，但在IE和firefox中并未触发。

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

我知道在Vue实例之外使用“ vm。$ on”进行侦听，但是我希望使客户端集成接缝的框架更少，并希望使用本机dom侦听器来识别对输入字段的任何更改。

这是代码示例代码来解释

发现了相关问题，但在这种情况下不起作用：

Is it possible to trigger events using Vue.js?

应用程序组件：-添加了一个隐藏的文本字段和一个按钮，该按钮使用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 />',
})

Vuejs实例之外的VueJS应用程序元素的侦听器不适用于Firefox和IE，但适用于chrome

0 个答案: