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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会给我一个空的Element，但不是null - 这表明查询部分成功（找到了某些内容）。

这实际上是我面临的更普遍问题的POC：从Vue组件中获取外部Element（例如，容器div）的能力（这给我带来了{{ 1}}，the documentation says是未找到元素时的响应。

是否可以在Vue对象或组件中查询DOM中存在的外部null？

Answer 1

这是一个完成我认为你想做的事情的片段。我修改了你的例子以使用类，因为我想避免让两个元素具有相同的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>

Answer 2

正如您所见，这是可能的。但要注意，如果你想要这样的东西，你的应用程序可能设计得很差，你为XSS攻击创建了入口点。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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.innerHTML}}
</div>

我认为您的代码现在可以正常工作，并且在helloElement中可以使用dom。

添加.innerHTML，您将获得解决方案。