Javascript VueJS实例外部VueJS应用程序元素的侦听器不在Firefox和IE中工作，但在chrome中工作
我的应用程序场景摘要：我创建了一个Vuejs应用程序，它可以与不同的web应用程序一起工作。任何网页中包含的Vuejs应用程序脚本都将替换集成网页上的div元素和用户在该网页上的某些操作，Vuejs应用程序将响应呈现给隐藏的输入字段，web应用程序应侦听这些隐藏字段上的任何更改事件，以确定响应的任何更改 问题: Vuejs实例外部的侦听器不会捕获在Vuejs应用程序内部触发的本机DOM事件 我在Vuejs应用程序中触发了输入字段上的本机DOM更改事件，也在元素上触发了它们，使用{this.$refs}引用实际的DOM元素，然后在集成网页上为任何更改事件添加了侦听器，但是IE和firefox中没有启动侦听器，尽管在chrome中一切都按预期工作 有人能给我提出解决这个问题的办法吗 我知道在Vue实例外部使用“vm.$on”进行侦听，但我希望保持客户端与框架的集成无缝，并使用本机dom侦听器来识别输入字段的任何更改 下面是要解释的代码示例代码 发现相关问题，但不适用于此案例： 应用程序组件：-添加了一个隐藏文本字段和一个按钮，该按钮使用javascript更改文本字段的值，这反过来将触发隐藏字段上的更改事件 网页：因此，当我尝试侦听网页上的更改事件时，侦听器不会启动，尽管更改事件是通过使用javascript的本机事件在Vuejs应用程序内触发的Javascript VueJS实例外部VueJS应用程序元素的侦听器不在Firefox和IE中工作，但在chrome中工作,javascript,html,dom,vuejs2,Javascript,Html,Dom,Vuejs2,我的应用程序场景摘要：我创建了一个Vuejs应用程序，它可以与不同的web应用程序一起工作。任何网页中包含的Vuejs应用程序脚本都将替换集成网页上的div元素和用户在该网页上的某些操作，Vuejs应用程序将响应呈现给隐藏的输入字段，web应用程序应侦听这些隐藏字段上的任何更改事件，以确定响应的任何更改 问题: Vuejs实例外部的侦听器不会捕获在Vuejs应用程序内部触发的本机DOM事件 我在Vuejs应用程序中触发了输入字段上的本机DOM更改事件，也在元素上触发了它们，使用{this.$re
<!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>
document.addEventListener（'DOMContentLoaded'，
功能（事件）{
var元素=document.getElementById（“测试字段”）；
元素。addEventListener（'change'，function（）{
console.log（“捕获的更改事件”）
})
})
单击以更改文本
导出默认值{
名称：“应用程序”，
数据：{
值：“”
}
方法：{
changeHiddenInputFieldvalue:函数（）{
this.value='此赋值可以将随机值用于测试触发器'；
},
triggerChangeEvent:函数（元素）{
if（元素）{
如果（文档中的“createEvent”）{
var evt=document.createEvent（'HTMLEvents'））
evt.initEvent（'input'，true，true）
元素。dispatchEvent（evt）
}
}
}
},
观察：{
值：函数（NewValue、oldValue）{
this.triggerChangeEvent（this.$refs.inputFieldToListen）
},
}
}
import Vue from 'vue'
import App from './App.vue'
var vueInstance = new Vue({
el: '#app',
data: {
},
template: '<App />',
})
从“Vue”导入Vue
从“./App.vue”导入应用程序
var vueInstance=新的Vue({
el:“#应用程序”，
数据：{
},
模板：“”，
})
输入el:“#app”@clickonclick