VueJS中无法遍历history ref数组数据，表格无内容显示求助

你的问题核心在于模板中循环的<tr>标签同时使用了与数据源同名的ref="history"，这会干扰Vue对遍历数据源的解析，导致表格无法正常渲染数据。

修复步骤： #

1. 移除<tr>上的ref="history"：你不需要给循环生成的表格行添加该ref，且它与遍历的history数组重名，会引发命名冲突，阻断数据渲染逻辑。
2. （可选）验证数据结构：如果修复后仍无内容，可在表格行内临时添加{{ row }}，确认每个数据项的属性与模板中使用的title/shares/price完全匹配。

修改后的模板代码： #

<template>
<div class="container">
    <h3 v-if="loading"> Loading... </h3>
     <table>
        <tr>
            <th>Title</th>
            <th>Shares</th>
            <th>Price</th>
        </tr>
        <!-- 移除冲突的ref属性 -->
        <tr v-for="row in history" :key="row.id" >
            <td>{{ row.title }}</td>
            <td>{{ row.shares }}</td>
            <td>{{ row.price }}</td>
            <!-- 可选：临时添加此行查看完整数据结构 -->
            <!-- <td>{{ row }}</td> -->
        </tr>
    </table> 
</div>

额外检查点： #

• 确认supabase.auth.user()返回的用户ID正确，保证查询到的数据确实属于当前用户。
• 查看浏览器控制台的警告/错误日志，检查是否存在属性未定义等隐性问题。

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