vue js和strapi - 控制台说属性未定义但不是 - 它呈现在页面上

Question

为什么会发生这样的事情？

我有一个 vue 应用程序，它指向一个 Strapi CMS 实例，并且正在使用 API 以在页面上呈现。

我稍微改变了我的后端查询，响应有点不同，所以我必须将数组索引 0 转到它（{{ webinar[0].webinar_title }}）但由于某种原因它说它是未定义的，即使它仍然呈现在页面上：

<template>
    <section class="webinar-information">
        <div>
          <h1>{{ webinar[0].webinar_title }}</h1>
          <p>{{ webinar[0].webinar_description }}</p>
        </div>
    </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'WebinarSingle',
  data () {
    return {
      webinar: [],
      error: null
    }
  },
  async mounted () {
    try {
      const response = await axios.get('http://localhost:1337/webinars?webinar_slug=' + `${this.$route.params.id}`)
      this.webinar = response.data
      console.log(this.webinar)
      // this is returning the title why is it "undefined" in the console?
      console.log('the title is: ' + this.webinar[0].webinar_title)
    } catch (error) {
      this.error = error;
    }
  },
  props: {
    header: String
  }
}
</script>

<style scoped>

</style>

输出正确，如下所示：

但我的控制台是这样的：

输出

http://localhost:1337/webinars?webinar_slug=' + ${this.$route.params.id}``

是：

http://localhost:1337/webinars?webinar_slug=accelerating-the-close-with-technology-and-automation

当您在控制台记录响应时，它看起来像这样：

所以我必须通过 [0] 来访问所有内容，但控制台说它是未定义的。为什么？

Answer 1

当页面加载时，Vue 会尝试渲染你的模板：

<template>
    <section class="webinar-information">
        <div>
          <h1>{{ webinar[0].webinar_title }}</h1>
          <p>{{ webinar[0].webinar_description }}</p>
        </div>
    </section>
</template>

此时，webinar 是您对其进行初始化的，即[]。当您尝试访问第一个元素时，这会导致您的错误。

X 毫秒后，localhost:1337 返回显示的响应。

要解决您的问题，您可以在模板中的根元素（不是模板元素）中添加v-if="webinar && webinar.length"，然后它只会在有元素时尝试访问webinar[0]。