How to access Vue component from standard JS?
Question
How can I get access to a component's data via a window.addEventListener? I want to hit the 'g' key and hide the Vue component test.
JS:
window.onload = function () {
Vue.component('test', {
template: `<div id="box" v-if="visible"></div>`,
data() {
return {
visible: true
}
}
})
var app = new Vue({
el: '#app'
});
window.addEventListener('keydown', (e) => {
if (e.key == 'g') {
//set test.visible = false
}
});
window.app = app;
}
HTML:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="code.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="app">
<test></test>
</div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2019-04-30 16:59:28
Add the listener in the created component's life cycle hook . This will give you access to the instance, including the visible data property.
Make sure to also remove the listener once your component is destroyed.
window.onload = function() { Vue.component('test', { template: `<div id="box" v-if="visible"></div>`, data() { return { visible: true } }, created() { window.addEventListener('keydown', this.visibilityHandler) }, destroyed() { window.removeEventListener('keydown', this.visibilityHandler) }, methods: { visibilityHandler(e) { if (e.key == 'g') { this.visible = false } } }, }); var app = new Vue({ el: '#app' }); window.app = app; }
#box { width: 100px; height: 100px; border: 1px solid red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <test></test> </div>
solution2
1 2019-04-30 16:52:51
Put the logic inside of the component:
Vue.component('test', {
template: `<div id="box" v-if="visible"></div>`,
data() {
return {
visible: true
}
},
mounted() {
window.addEventListener('keydown', (e) => {
if (e.key == 'g') {
this.visible = false
}
});
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Vue js access data from seperate component , how to?
How to access component style array in vue js?
how to render component from a component in vue js
How to access header component in home.vue in Vue js
How can I access a parent method from child component in Vue.js?
How to access function inside methods of mixin from component lifecycle method in Vue.js
How to access a component function from main.js in Vue 3 with Composition API
How can I access/mutate Vue component properties from vanilla JS
Access component data structure from parent object in Vue.js
Vue.js - access data from root instance within component
Related Tags