Vue3页面数据渲染

今天在用Vue3渲染页面时遇到一个小问题。

<div v-for="(item) in info" v-bind:key="item.pid">{{item}}</div>

这里我使用了本地的mock数据。现在这样写在控制台中可以打印出来，但渲染不到页面上。

setup(){
    let info = ref([]);
    //select()是我mock数据的请求接口
    onMounted(async()=>{
      let res = await select();
      info = res.data.data;
      console.log(info);
    })

    return{
      info
    }
  }

纠结一段时间后发现需要在info后加上.value才能渲染到页面上。

setup(){

    let info = ref([]);
    onMounted(async()=>{
      let res = await select();
      //这里在info后加上.value
      info.value = res.data.data;
      console.log(info);
    })

    return{
      info
    }
  }

现在页面上就可以正常显示了。