首页 文章

为什么我的计算机未定义

提问于
浏览 次
0

我创建了一个应用程序，它使用axios（vue-axios）将数据从JSON文件获取到Vuex存储 . 我还使用Vue-Router为我的应用程序提供不同的视图 .

  • 在我的主要组件（ App.vue ）中，我显示 <router-view>

  • 我的视图组件是 Slides.vue

  • 当2.是 created() 我这样做

created(): {
  this.$http.get('./static/data/slides.json')
    .then(({ data }) => {
      this.$store.state.slides = data;
    })
    .catch((error) => {
      console.log(error);
    });
},
  • 在该组件（ Slides.vue ）中有 Slide.vue 组件获得 :slides="slides" prop：
<Slide :slides="slides" />
  • 里面 Slide.vue 我在 <script> ：
props: ['slides'],
computed: {
  slideId() { return this.$store.state.activeSlide; },
  slide() { return this.slides[this.slideId]; },
  slideTitle() { return this.slide.title; },
},
  • 在 <template> 中我使用 {{ slideTitle }} 来显示 Headers

当我尝试运行它时，我在 Slide.vue 中有一个错误：

[Vue警告]：渲染错误：“TypeError：this.slide is undefined”

为什么会这样？

当我将 this.slide.title 更改为 this.slide 时，它似乎工作（但显示来自JSON文件的所有数据，这不是我想要的）

vue.js axios vue-router vuex

1 回答

  • 1

    我认为问题与 this.slideId 在商店的 created() 调用被解决之前未定义有关 - 或者在任何时候 - . 这会导致计算属性 slide 为 undefined - 因为它解析为 this.slides[undefined] . 最后，计算属性 slideTitle 解析为 undefined.title ，从而引发错误 .

    如果我是对的，您可以通过修改 slideTitle() computed属性来解决此问题，如下所示：

    slideTitle() { return this.slide && this.slide.title; }

    这样说，你的 created() 钩子有一个问题，当你这样做：

    this.$store.state.slides = data;

    您正在直接操纵商店状态 . 这是vuex禁止的，会导致各种错误 . 相反，you should use a mutation来修改存储状态 .

    回复于

相关问题