I receive an error when I load my website.

My code looks like that:

              <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,
    };
  },
  puted: {
    ...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();
  },
};

I defined the rendered data and even added an v-if to my template. Where do I make a mistake? Thank you in advance!

I receive an error when I load my website.

My code looks like that:

              <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,
    };
  },
  puted: {
    ...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();
  },
};

I defined the rendered data and even added an v-if to my template. Where do I make a mistake? Thank you in advance!

• javascript
• vue.js
• axios
• render

• 1 I think all you have to do is bookings: []. Define it as empty array in data() – Erenn Commented Dec 3, 2021 at 14:23
• 2 It might be typo because in data function name of array is boookings data() {return { boookings: undefined }; } and in v-for loop spelling is different bookings – Jatinder Commented Dec 3, 2021 at 14:30
• @Jatinder Yes you are right. In data() there is 3 o boookings. lol. – Erenn Commented Dec 3, 2021 at 14:33
• @Jatinder what a fail.. – roxena Commented Dec 3, 2021 at 14:39
• @Erenn yes, works now like that. Thank you both! – roxena Commented Dec 3, 2021 at 14:40

2 Answers 2

After I renamed boookings to booking and defined it like the code below, it worked perfectly.

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

Cause you define it as undefined in your data object.

Make the axios call inside async created() function and assign it to this.bookings, then it should be gone.

use await instead of callbacks on the getBookings and then do this.

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