html 当尝试显示Vue视图时，出现错误“无法读取null的属性(阅读“样式”)”

xzlaal3s 于 2023-06-20 发布在其他

关注(0)|答案(2)|浏览(169)

我有一个标题与@click在我的身体。点击后，应该会显示一个Vue视图，但我得到的是错误：
Cannot read properties of null (reading 'style')
从what I've read发生错误，因为document.getElementById("view")返回null，这可能有几个原因：
1.脚本在加载文档之前运行，因此找不到view项。
1.没有view项。
因为肯定有一个view项目，我猜第一个原因是导致错误，但我不明白为什么也不知道如何修复它。
下面是我的App.vue文件中的代码：

<template>
  <h1 @click="showInfo()">Header</h1>
  <div class="view" style="display: none">
    <AnotherView />
  </div>
</template>
<style scoped>
.view {
}
</style>
<script>
import AnotherView from "./views/AnotherView.vue";
export default {
  components: { AnotherView },
  methods: {
    showInfo() {
      document.getElementById("view").style.display = "block";
    },
  },
};
</script>

Html

来源：https://stackoverflow.com/questions/76457835/error-cannot-read-properties-of-null-reading-style-when-attempting-to-disp

2条答案

按热度按时间

nnvyjq4y1#

您正在查询getElementById()中的一个类，正确的做法是通过用户@Sfili_81提到的ID来获取它。
而且你也应该使用$ref来做这个处理。

<template>
  <h1 @click="showInfo()">Header</h1>
  <div ref="view-ref" class="view" style="display: none">
    <AnotherView />
  </div>
</template>
<style scoped>
.view {
}
</style>
<script>
import AnotherView from "./views/AnotherView.vue";
export default {
  components: { AnotherView },
  methods: {
    showInfo() {
      this.$refs.style.display = "block";
    },
  },
};
</script>

展开查看全部

赞(0）回复(0）举报 2023-06-20

t30tvxxf2#

你可以使用条件类像下面的源使用isShowInfo布尔标志（如果你想，切换）和编辑样式源块类是开/关

<template>
  <h1 @click="showInfo()">Header</h1>
  <div class="view" :class="{ 'block': isShowInfo }">
    <AnotherView />
  </div>
</template>
<style scoped>
.view {
  display: none;
  &.block {
    display: block;
  }
}
</style>
<script>
import AnotherView from "./views/AnotherView.vue";
export default {
  components: { AnotherView },
  data () {
    isShowInfo: false,
  },
  methods: {
    showInfo() {
      this.isShowInfo = true
    },
  },
};
</script>

展开查看全部

赞(0）回复(0）举报 2023-06-20

我来回答

html 当尝试显示Vue视图时，出现错误“无法读取null的属性(阅读“样式”)”

2条答案

相关问题

热门标签

最新问答