通过 VueJS 选择 DOM 元素
Posted
技术标签:
【中文标题】通过 VueJS 选择 DOM 元素【英文标题】：Select DOM element via VueJS 【发布时间】：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 【参考方案1】：你可以在 DOM 属性中使用 ref 并在 js 部分通过 $refs 调用它
前：
<input ref="inputName" />
并在js部分调用
this.$refs.inputName
你可以在这里阅读explanation
【讨论】：
以上是关于通过 VueJS 选择 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章