Vue：在渲染期间访问但未定义的属性答案

【问题标题】：Vue: Property accessed during render but not definedVue：在渲染期间访问但未定义的属性
【发布时间】：2022-01-09 21:45:48
【问题描述】：

我在加载网站时收到错误消息。

我的代码是这样的：


              <div v-if="bookings">
                <div class="row">
                  <div
                    class="col-12 m-2"
                    v-for="booking in bookings"
                    :key="booking.booking_id"
                  >
                    <BookingListItem :booking="booking" />
                  </div>
                </div>
              </div>
......

data() {
    return {
      boookings: undefined,
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.patient,
    }),
  },
  methods: {
    getBookings() {
      this.id = this.user.id;
      console.log(this.id);
      return axios
        .get('URL/patients/${this.id}/bookings')
        .then((response) => {
          this.bookings = response.data;
        })
        .catch((error) => {
          console.log("Ein Fehler ist aufgetreten: " + error.response);
        });
    },
  },
  created() {
    this.getBookings();
  },
};

我定义了渲染的数据，甚至在我的模板中添加了一个 v-if。我在哪里犯错？提前谢谢！

【问题讨论】：

我想你所要做的就是bookings: []。将其定义为data()中的空数组@
这可能是拼写错误，因为数组的数据函数名称是 boookings data() {return { boookings: undefined }; } 而在 v-for 循环中拼写不同 bookings跨度>
@Jatinder 是的，你是对的。在 data() 中有 3 个 o boookings。大声笑。
@Jatinder 太失败了..
@Erenn 是的，现在可以这样工作。谢谢你们！

标签： javascript vue.js axios render

【解决方案1】：

因为您在数据对象中将其定义为未定义。

在 async created() 函数中进行 axios 调用并将其分配给 this.bookings，然后它应该消失了。

在 getBookings 上使用 await 而不是回调，然后执行此操作。

async created(){
this.bookings = await this.getBookings();
}

【讨论】：

【解决方案2】：

在我将预订重命名为预订并像下面的代码一样对其进行定义后，它运行良好。

  data() {
    return {
      bookings: [],
    };
  },

【讨论】：