Question

如何解决无法读取未定义错误的属性？

2022-11-06

882

javascript vue.js vuejs2

我收到此警告：

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'nestedArray')"

此问题的解决方案是什么？这是我的 beforeCreate 函数：

  beforeCreate() {
    this.$store.dispatch("loadCities").then((response) => {
      this.cities = response;
      this.sortingCities=this.cities.slice(0).sort(function(a,b) {
        return a.row - b.row || a.col-b.col;
      })
     
      this.sortingCities.map(item => {
        if (!this.nestedArray[item.row]) {
          this.nestedArray[item.row] = [];
        }
        this.nestedArray[item.row][item.col] = item;
      });
    });

我的数据属性：

  data() {
    return {
      cities: [],
      selectedCity: null,
      sortingCities:[],
      nestedArray:[],
    };
  },

我使用此属性：

<img  :src="require(`../images/${this.nestedArray?.[row]?.[col].imageId}.png`)" alt="">

Answer 1

在 beforeCreate 内部，您不应期望任何 data 、 methods 或 computed 可用。这在此处 (vue 3) 和此处 (vue 2) 中有记录。

将 beforeCreated 的内容移到 mounted 中。
如果 <template> 中有任何与获取的数据相关的内容，请为其提供适当的 v-if （例如： v-if="nestedArray.length" ）。

Answer 2

问题的根本原因： 问题在于访问 beforeCreate 生命周期钩子内的 data 对象属性。此生命周期钩子在实例初始化后立即调用，在处理 data 选项之前。

解决方案： 您可以将逻辑放在 mounted() 钩子中，而不是 beforeCreate 中，因为它是在实例安装后调用的。

现场演示：

new Vue({
  el: '#app',
  data() {
    return {
      message: []
    }
  },
  beforeCreate() {
    this.message.push('beforeCreate hook called!'); // ❌
  },
  mounted() {
    this.message.push('mounted hook called!'); // ✅
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pre>{{ message }}</pre>
</div>

Answer 3

new Vue({
  el: "#app",
  data() {
    return {
     nestedArrays: []
    }
  },
  created() {
    console.log(this.nestedArrays)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>