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

Question

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

我的代码看起来像这样：

              <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。我哪里出错了？先感谢您！

Answer 1

在我将 bookings 重命名为 booking 并像下面的代码一样定义它后，它运行得很好。

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