vue 父子传值数据接收之后该如何处理?

Question

// 上面直接使用会包错
<h4>{{ orderInfo.OrderItems[0].GoodsName }}</h4>

// 子组件
  props: {
    list: {
      type: Object,
      required: true,
      default: () => ({
        OrderTrackInfo: [],
        OrderInfo: {},
        OrderItems: [],
      }),
    },
  },

  computed: {
    orderInfo() {
      return this.list.OrderInfo || {};
    },

    logisticsList() {
      return this.list.OrderTrackInfo;
    },

    orderItems() {
      // 处理0为定义的报错, 但是这样操作不对
      return this.list.OrderInfo.OrderItems[0] || {};
    },
  },

还是会报未定义的错,

Answer 1

应该这样吧，数据定义错了

computed: {
    orderInfo() {
      return this.list.OrderInfo || { OrderItems: [] };
    },
}

Answer 2

orderInfo 里没有定义 OrderItems 当然是 undefined 了，

Answer 3

先打印父传子的相关数据,查看list中的结构，如下:

orderItems() {
  console.log(this.list) // 查看list中的结构
  // return this.list.OrderInfo.OrderItems[0] || {};
},

然后再处理相关的数据。