admin 管理员组

文章数量: 1086019

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
Share Improve this question asked Dec 3, 2021 at 14:17 roxenaroxena 2092 silver badges11 bronze badges 5
  • 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
Add a ment  | 

2 Answers 2

Reset to default 3

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();
}

本文标签： javascriptVue Property accessed during render but not definedStack Overflow

版权声明：本文标题：javascript - Vue: Property accessed during render but not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744067983a2527960.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。