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

【问题标题】：How to get an Element by Id in Vue?如何在 Vue 中通过 Id 获取元素？
【发布时间】：2017-10-31 14:51:27
【问题描述】：

我想在 Vue 中获得一个外部的Element，使用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（例如，容器div）的能力（这给我带来了null，其中@ 987654323@ 为未找到元素时的响应）。

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

【问题讨论】：

你的代码有效。真正的问题是您希望看到{{helloElement}} 什么？
@dfsq：这是个好问题。我希望看到一个结构，但我只是测试并检查了一个适当性（通过{{helloElement.scrollWidth}}）并看到它确实存在。谢谢 - 我应该早点检查一下。如果您不介意将您的评论变成答案，我很乐意接受。
请问，您到底想做什么？
@Saurabh：我有一个用文本填充的 Vue 组件，它与其他组件一起位于页面上（固定大小）。组件中的文本将是可变的，可能大到会从屏幕溢出（应用程序是非交互式的，一种必须适合一个窗口的仪表板）。每次文本改变时，我都会改变字体的大小，直到溢出（然后稍微向后）。我将通过element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth 检查溢出，其中element 是最外层的容器。
@Saurabh (cont'd)：这就是为什么我需要能够获取有关容器的信息，这将在将实现上述动态调整大小的组件之外。

标签： javascript vue.js vue-component

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 你会得到解决方案。

【讨论】：