在 v-tabs 中使用 vuejs 和 vuetify 访问 dom 元素答案

【问题标题】：Access dom element with vuejs and vuetify in v-tabs在 v-tabs 中使用 vuejs 和 vuetify 访问 dom 元素
【发布时间】：2020-06-01 14:39:44
【问题描述】：

我在 v-tabs 中有一个带有 'id="meet"' 的 div 标签。

单击选项卡后，我需要访问此标记的节点。我正在使用

let node=document.querySelector("#meet").

我的问题是它总是返回“null”。这是代码笔：https://codepen.io/luizalves/pen/WNrepxz

这里有什么问题？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

不保证在 $nextTick 之后你会立即看到 DOM 元素。

 <div id="meet"></div>
<button @click="onTest">test</button>
...
methods: {
onTest () {
      let node=document.querySelector("#meet");
      console.log('meet here',node)  
    },

单击test 后，您将在控制台中看到：

"meet here" "<div id='meet'></div>"

您可以尝试将这个具有唯一 id 的 div 提取到一个单独的组件中，并在其中使用 mounted 挂钩来知道它存在于 DOM 中

【讨论】：

【解决方案2】：

当然，根据 vuetify 文档，您可以将 eager 属性添加到 v-tab-item 组件中，仅此而已，但是...可能您正在做出了点问题。

总是添加这个道具不是一个好主意，因为你正在失去 vuetify 2.X 的优势之一 - 延迟加载。如果选项卡上有很多元素，这可能会导致很大的性能问题。

如果您直接使用反应变量（如 v-model 指令中的变量）而不是 DOM 对象，可能会更好。

【讨论】：

我的 div id 将被 Jitsi 视频会议 iframe 替换。我不知道是否可以使用反应变量。