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

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

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

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

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

Answer 2

在我将 boookings 重命名为 booking 并像下面的代码一样定义它之后，它完美地工作了。

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

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

Vue: Property accessed during render but not defined

javascript

vue.js

axios

render

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

Vue: Property accessed during render but not defined

javascript

vue.js

axios

render

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