vue3 为什么template中遍历找不到goods呢?

Question

export default {
  name: "XtxPayCheckoutPage",
  components: {
    checkoutAddress,
  },
  setup(props, { emit }) {
    const order = ref(null);
    createOrder().then((data) => {
      order.value = data.result;
      console.log(order.value);
    });
    return {
      order,
      
    };
  },
};

下面的代码是这样的,我还打印了order的结果, 是这样的:

但是在template中使用的时候,却说找不到goods,这是为什么呢?我百思不得其解T^T
<tr v-for="item in order.goods">

报错:

谢谢大佬们了!!!感恩!想了好久想不出来55555

Answer 1

可能是初始化渲染的时候 order 是个 null吧。
可以加个 v-if 试试看

<template v-if="order">
    <tr v-for="item in order.goods">
</template>

Answer 2

按题主的描述，template 渲染的时候，order.value 还没有值。
建议找一下 vue 生命周期相关的方法。

Answer 3

请这样定义order

const order = ref({
goods: []
})

你那个报错是初次渲染的时候，order里面没有goods，所以报错。因为错误中断了后面的进程，所以后面order里面有goods了，也无法渲染。

Answer 4

写错了 = =·

console.log(order.value?.goods);