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

Question

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

我有一个指向 strapi CMS 实例的 vue 应用程序，它正在使用 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 returns 显示的响应。

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

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

vue js and strapi - console says property is undefined but it's not - it renders on the page

javascript

node.js

vue.js

strapi

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

vue js and strapi - console says property is undefined but it's not - it renders on the page

javascript

node.js

vue.js

strapi

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