通过计算道具访问对象时，对象的属性未定义

Question

我遇到了一个问题，当我尝试通过 compted 属性访问对象的属性时，它是未定义的。对象设置为异步。

有两点需要澄清：

1- 当我将对象记录到计算函数内的控制台时-> 属性（状态）已设置。但是当我记录属性本身时，它是未定义的。

  computed: {
    propA() {
      console.log(this.booking);
       // { state: "Draft", product: (...) }
      console.log(this.booking.state);
       //undefined
      console.log(this.booking.product);
       //"Product abc"
  }
}

2- this.booking.state 通过v-model 正确绑定到视图。

booking设置如下：

 props: {
    currentBooking: Object,
  },
  data() {
    return {
      booking: Object,
    };
  },
  async mounted() {
    this.booking = { ...this.currentBooking }; // {product: "Product abc"}
    this.booking.state =  "Draft";
}

Answer 1

由于数据设置为异步，因此在记录时属性为undefined。您在记录对象时看到它的唯一原因是控制台能够更新对象/数组。当您单击对象以查看属性时，它会自行更新以显示 当前 值。

这仅适用于引用（如对象/数组），因为控制台使用该引用来更新自身。

因此，当您记录非对象属性时，您会看到记录时的数据：undefined。但是，当您记录对象，然后单击展开属性时，您会看到现在的数据。