通过 VueJS 选择 DOM 元素答案

【问题标题】：Select DOM element via VueJS通过 VueJS 选择 DOM 元素
【发布时间】：2019-12-21 07:15:21
【问题描述】：

我使用清晰的 JavaScript 编写了一个 Chromium 扩展来与 DOM 交互，但现在我研究 VueJS 并重写了扩展以使用 Vue。我发现一个问题：有一个<input> 元素连接到Vue。

我通过 Vue 实例的 bg.cp 属性更改它的值，现在我需要选择 DOM 元素。有没有办法使用 Vue 实例而不是使用 document.getElementById('test').select() 进行文本选择？

最终目标是将<input> 字段复制到剪贴板。

<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>

【问题讨论】：

添加一个 reference 到它，并以这种方式访问它 - vuejs.org/v2/api/#vm-refs 或 codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

标签： javascript html dom google-chrome-extension vuejs2

【解决方案1】：

你可以在 DOM 属性中使用 ref 并在 js 部分通过 $refs 调用它

前：

<input ref="inputName" />

并在js部分调用

this.$refs.inputName

你可以在这里阅读explanation

【讨论】：