Краткое описание сценария моего приложения: я создал приложение Vuejs, которое может работать с различными веб-приложениями. Сценарий приложения Vuejs, включенный в любую веб-страницу, заменит элемент div при интеграции веб-страницы и при определенных действиях пользователя на странице, приложение Vuejs отреагирует на скрытые поля ввода, и веб-приложение должно прослушивать любые события изменения в этих скрытых полях, чтобы определить любые изменения в ответе
Проблема:
Собственные события DOM, запускаемые внутри приложения Vuejs, не регистрируются слушателями вне экземпляра Vuejs
У меня есть собственные события изменения DOM в поле ввода, которые запускаются в приложении Vuejs, а также запускают их на элементах, используя {this. $ Refs} для ссылки на фактический элемент DOM, а затем добавили прослушиватели на интегрирующей веб-странице для любых событий изменения, кроме прослушивателей не работают в IE и Firefox, хотя в Chrome все работает как положено.
Может кто-нибудь предложить мне какое-нибудь решение для решения этой проблемы?
Мне известно о прослушивании с использованием "vm. $ On" вне экземпляра Vue, но я хочу, чтобы шов интеграции клиента был меньше для фреймворка, и использую собственные слушатели dom для определения любых изменений в полях ввода.
Вот пример кода для объяснения
Связанные проблемы найдены, но не работают для этого случая:
Можно ли запускать события, используя Vue.js?
Компонент приложения: - Добавлено скрытое текстовое поле и кнопка, которая изменяет значение текстового поля с помощью JavaScript, что, в свою очередь, вызовет событие изменения в скрытом поле.
Веб-страница: поэтому, когда я пытаюсь прослушать события изменения на веб-странице, слушатели не запускаются, хотя события изменения запускаются внутри приложения Vuejs через собственные события с использованием javascript
<!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 />',
})