I wrote a Chromium extension using clear JavaScript to interact with the DOM, but now I study VueJS and rewrote the extension to use Vue. I found one problem: there is one <input> element connected to Vue.
I change its value via the bg.cp property of the Vue instance, and now I need to select the DOM element. Is there any way to make text selection using the Vue instance instead of using document.getElementById('test').select()?
The final goal is to copy the <input> field to clipboard.
<body>
<div id="appBg">
<input v-model="cp" id="test">
</div>
<script>
//vue instance of div with input field
var bg = new Vue({
el: "#appBg",
data: {
cp: ""
}
});
</script>
</body>
I wrote a Chromium extension using clear JavaScript to interact with the DOM, but now I study VueJS and rewrote the extension to use Vue. I found one problem: there is one <input> element connected to Vue.
I change its value via the bg.cp property of the Vue instance, and now I need to select the DOM element. Is there any way to make text selection using the Vue instance instead of using document.getElementById('test').select()?
The final goal is to copy the <input> field to clipboard.
<body>
<div id="appBg">
<input v-model="cp" id="test">
</div>
<script>
//vue instance of div with input field
var bg = new Vue({
el: "#appBg",
data: {
cp: ""
}
});
</script>
</body>
- add a reference to it, and access it that way - vuejs/v2/api/#vm-refs or codingexplained./coding/front-end/vue-js/accessing-dom-refs – muka.gergely Commented Aug 14, 2019 at 18:49
1 Answer
Reset to default 9you can use ref in DOM attribute and call it by $refs in js section
EX:
<input ref="inputName" />
and in js section call
this.$refs.inputName
here you can read explanation of it