Vue 如何通过 Id 获取元素？

Question

我想在 Vue 中使用 getElementById() 获得一个外部 Element ：

 new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementById('hello')
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="hello">
  hello
</div>
<div id="vue">
  {{helloElement}}
</div>

这给我带来了一个空的 Element ，但不是 null 这表明查询部分成功（找到了一些东西）。

这实际上是针对我面临的一个更普遍问题的 POC：从 Vue 组件中获取外部 Element （例如，一个容器 div ）的能力（这给我带来了 null ， 文档说 这是找不到元素时的响应）。

是否有可能从 Vue 对象或组件中查询 DOM 中存在的外部 Element ？

原文由 WoJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如您所见，这是可能的。但请注意，如果您想要这样的东西，您的应用程序可能设计不当，并且您为 XSS 攻击创建了入口点。

 new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementById('hello').outerHTML
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="hello">
  hello
</div>
<div id="vue" v-html="helloElement"></div>

原文由 user6748331 发布，翻译遵循 CC BY-SA 3.0 许可协议