CODEWITHSUNDEEP
javascripthtmldomgoogle-chrome-extensionvuejs2
Ryoidenshi Aokigahara
Ryoidenshi Aokigahara

Reputation: 168

Select DOM element via VueJS

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>

Upvotes: 5

Views: 10823

Answers (1)

z.io
z.io

Reputation: 186

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

Upvotes: 9

Related Questions