Vue中如何通过Id获取元素？

Question

我想Element在 Vue 中使用以下方法获得外部getElementById()：

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（例如，容器）（这给我带来了一个，文档说这是找不到元素时的响应）。divnull

是否可以从 Vue 对象或组件内部查询ElementDOM 中存在的外部对象？

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>

Answer 2

这是一个实现我相信你想做的事情的片段。我修改了您的示例以使用类，因为我想避免两个元素具有相同的 id。我只是用来outerHTML获取 DOM 元素作为字符串，然后使用 Vue 的v-html.

new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementsByClassName('hello')[0].outerHTML
  }
})

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