在Storybook Vue中使用document.querySelector

Question

我有一个Vue组件，该组件在计算属性中使用document.querySelector。计算出的属性只是：

elHeight () {
  return document.querySelector(this.nav).clientHeight;
},

this.nav只是作为prop传入的id。

[我正在尝试使用Storybook为此组件编写一个故事，但出现错误，说

cannot find clientHeight of null

在我的故事中，我有

  .add('TopContainer', () => ({
    components: { TopContainer, },
    template: `
      <div id="user-nav" style="height:60px;" />
      <TopContainer :nav="'#user-nav'" />
    `,
  }));

我已尝试在计算机中尝试进行控制台日志记录this.nav，以确保它确实已传入。我想知道是否是因为我的组件使用document.querySelector来抓取该组件，也许在Storybook中不起作用？

任何见识将不胜感激！！

Answer 1

为什么使用嵌套引号？这里不是Vue专家，但正如我所见，您的this.nav设置为"'#user-nav'"。这表示您正在像这样呼叫querySelector：

document.querySelector("'#user-nav'")

尝试删除内部引号（使用"#user-nav"），您的代码应该可以使用。