Select DOM element via VueJS

Question

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.org/v2/api/#vm-refs or codingexplained.com/coding/front-end/vue-js/accessing-dom-refs — muka.gergely
– muka.gergely, Commented Aug 14, 2019 at 18:49

z.io · Accepted Answer · 2019-08-14 18:55:15Z

9

you 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

answered Aug 14, 2019 at 18:55

z.io

1864 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select DOM element via VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related