Vue渲染提示Property accessed during render but not defined报错如何解决

你代码存在两处核心错误：

• 响应式变量拼写错误
  你在data选项中定义的变量名为boookings（字母o多写了1个），但模板中v-if判断、v-for遍历，以及接口请求成功后的赋值操作，用的都是bookings（2个o），二者完全不匹配。这会导致接口请求成功后赋值的this.bookings不是响应式变量，且初始状态下this.bookings属于未定义的非响应式变量，直接触发渲染报错。
• 接口URL字符串语法错误
  你调用axios.get时使用单引号包裹URL，但是你在URL中使用了${this.id}的模板变量插值语法，只有反引号（）包裹的模板字符串才会解析插值变量，单引号包裹的字符串会直接把${this.id}`当成普通字符串内容，导致请求地址错误，无法拿到正确的返回数据。

修正方案 #

1. 修正data中的变量拼写：

data() {
    return {
      // 将3个o的boookings改为2个o的bookings
      bookings: undefined,
    };
},

2. 修正axios请求的URL包裹符号：

// 将包裹URL的单引号改为反引号
.get(`URL/patients/${this.id}/bookings`)

修正完成后即可解决当前问题，如果仍有异常可以在控制台检查接口请求的返回值结构是否符合预期。

内容的提问来源于stack exchange，提问作者roxena