Question

我知道以前曾有人问过这个问题，但似乎没有任何问题与我的问题相符。我不知道发生了什么。

错误

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'shipperid'”

我正在从API中检索数据（作为状态（vuex），而不是本地数据）。

  <template>
    <div>Hello
      <div>{{allBatches[0].shipperid}}</div>
    </div>
  </template>
  <script>
      import { mapGetters, mapActions } from "vuex";
      export default {
        name: "batching",
        components: {},
        props: {},
        data: function() {
          return {};
        },
        computed: {
          ...mapGetters(["allBatches"])
        },
        methods: {
          ...mapActions(["fetchBatches"])
        },
        created() {
          this.fetchBatches();
        }
      };
  </script>

数据来了，但是错误困扰着我。

此外，如果我对其进行编辑，则会发生此错误。我有点理解他们要我做什么，但我不知道我怎么做。默认值来自可重用组件。（所有已添加到沙箱中）我将不胜感激

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“默认值”

这是 sandbox

中系统的最小副本

Answer 1

由于以下事实，您需要在模板中添加v-if条件：创建/安装组件时，如果API仍在其中运行，则vuex的allBatches getter中将没有任何细节。背景。

因此，使用修改模板，

 <div>Hello
     <div v-if="allBatches">{{allBatches[0].shipperid}}</div>
 </div>

每当API调用完成时，allBatches就会被更改，并且由于反应性，它会以allBatches的更改重新呈现html。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'shipperid'”

1 个答案: