时间戳

首页 > 解决方案 > 在 v-tabs 中使用 vuejs 和 vuetify 访问 dom 元素

vue.js - 在 v-tabs 中使用 vuejs 和 vuetify 访问 dom 元素

问题描述

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

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

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

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

这里有什么问题？

标签： vue.jsvuetify.js

解决方案

无法保证在 $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 中

推荐阅读