Vue3连接Supabase表格行删除无响应问题求助

问题根源 #

你的代码存在几个关键问题导致删除功能失效：

• deleteRow 函数未接收模板传递的 row.id 参数，且函数内部直接使用 row.id 会导致变量未定义
• 删除操作后未更新本地绑定的 posts 数据，数据库删除成功后页面无法同步刷新
• onMounted 钩子被错误嵌套在 deleteRow 函数内部，无法正确触发数据初始化
• 缺少 Supabase 请求的错误处理，无法排查请求是否成功

修正后的完整代码 #

模板部分

<template>
  <a-table :data-source="posts">
    <a-table-column-group>
      <a-table-column key="name" data-index="fullName">
        <template #title><span style="color: #1890ff">Name</span></template>
      </a-table-column>
      <a-table-column key="amount" title="Amount" data-index="amount" />
      <a-table-column key="recieved_date" title="recieved_date" data-index="recieved_date" />
      <a-table-column key="description" title="Description" data-index="description" />
      <a-table-column key="id" title="ID" data-index="id" />
      <a-table-column key="action" title="Action">
        <!-- 通过作用域插槽获取当前行数据 -->
        <template #default="{ record }">
          <AButton @click="deleteRow(record.id)">Delete</AButton>
        </template>
      </a-table-column>
    </a-table-column-group>
  </a-table>
</template>

脚本部分

<script setup>
import { onMounted, ref } from 'vue'

// 假设已正确初始化supabase实例
// const supabase = createClient(...)

// 声明响应式数据posts
const posts = ref([])

// 获取数据函数
const fetchData = async () => {
  const { data, error } = await supabase
    .from("Contractor_Payment")
    .select("*")
  if (error) console.error(error)
  else posts.value = data
}

// 删除函数：接收行ID参数
const deleteRow = async (id) => {
  const { error } = await supabase
    .from("Contractor_Payment")
    .delete()
    .eq("id", id)
  
  if (error) {
    console.error("删除失败：", error)
  } else {
    // 过滤本地数据，同步页面显示
    posts.value = posts.value.filter(item => item.id !== id)
  }
}

// 正确挂载钩子，初始化数据
onMounted(() => {
  fetchData()
})
</script>

关键修改说明 #

• 模板中通过 #default="{ record }" 作用域插槽正确获取当前行数据，替代原有的未定义 row 变量
• deleteRow 函数添加 id 参数，接收传递的行ID，解决变量未定义问题
• 删除成功后通过 filter 方法更新本地 posts 数据，实现页面实时刷新
• 补充 Supabase 请求的错误处理，方便排查问题
• 将 onMounted 钩子移到函数外部，确保页面加载时正确初始化数据
• 明确使用 ref 声明响应式数据 posts，保证数据更新时页面自动响应

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