主页 / 问题 / 1243871
Accepted
midnightelf18
Asked:2022-02-14 19:32:12 +0000 UTC2022-02-14 19:32:12 +0000 UTC

如何在此组件中显示对象的内容？

  • 772

我从服务器收到此响应
在此处输入图像描述

这就是我请求获取组件中数据的方式：

computed: {
  ...mapGetters([
    'showNews'
  ]),

  },
  mounted() {
     this.$store.dispatch('newsById', this.id /* в компонент передается props id */);
  }

newsById在actionstore/index.js中看起来像这样：

newsById({ commit }, id) {
  axios.get(`/news/${id}`, apiConfig)
    .then(response => {
      console.log(response);
        commit('newsByIdMutation', response);
    })
}

newsByIdMutation在mutationsstore/index.js中看起来像这样：

newsByIdMutation(state, newsById) {
  state.showNews = newsById.data;
}

{{ showNews.title }}在组件的标记中，我试图以这种方式访问​​该对象{{ showNews.text }}。但我得到一个错误：Uncaught (in promise) TypeError: Cannot read property 'title_img' of undefined 。我如何在我得到的对象中获取这些属性？

vue.js

1 个回答

  1. Best Answer

    Vue依赖数据。渲染始终是同步的。axios该组件在尝试呈现模板之前不会等待任何调用完成。

    这是一种典型情况 - 与问题中的错误类似的错误是如何发生的：

    new Vue({
  el: '#app',
  data: {
    obj: undefined
  },
  mounted(){
    this.$nextTick(() => {
      this.obj = {
        title: 'Title'
      }
    })
  }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  {{ obj.title }}
</div>

    尽管在此示例中title它已成功构建到模板中（由于反应性），但在渲染阶段我们收到一个错误，通知我们模板使用未定义的数据（因为在渲染阶段它也vue接收obj到undefined因为找不到在属性模板中声明的title- 引发错误）。

    为了避免这种错误，您应该使用指令v-if（条件渲染）（在组件的模板中，或者在组件本身，在父模板中）来处理组件已经渲染但还没有数据可用的情况。

    让我们重写示例以消除错误：

    new Vue({
  el: '#app',
  data: {
    obj: undefined
  },
  mounted() {
    this.$nextTick(() => {
      this.obj = {
        title: 'Title'
      }
    })
  }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <template v-if="obj">
    {{ obj.title }}
  </template>
</div>

    • 1

相关问题