javascriptvuejs3supabase

I am using vue 3 to connect to supabase database and pull records into a table. I am having some trouble deleting a row using a click event

I am new to vue 3 and I am following some online vue 3 training:) so I get records back from the supabase database, the table the table gets populated with the exepected data. The last column has an action button with a delete button for every row. The challenge I am having is that When I click the delete button record nothing gets deleted. I tried few suggestions online but no luck.

Here is my template and the script:

<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">
        <span>      
         <AButton @click="deleteRow(row.id)">Delete</AButton> 
          </span>
         </a-table-column>
   </a-table-column-group>
  </a-table>
</template>
<script setup>
const columns = [{
  name: 'Name',
  dataIndex: 'fullName',
  key: 'fullName',
}, {
  title: 'recieved_date',
  dataIndex: 'recieved_date',
  key: 'recieved_date',
},  {
  title: 'Amount',
  key: 'amount',
  dataIndex: 'amount',
}, 
{
  title: 'Description',
  dataIndex: 'description',
  key: 'description',
},
{
  title: 'id',
  dataIndex: 'id',
  key: 'id',
 
 },
{
  title: 'Action',
  dataIndex: 'action',
  key: 'action',
 
 },
];

  //delete record
    
     const deleteRow = async () => {
    
    const { data,index } =
    await supabase.from("Contractor_Payment")
    .delete()
    .eq("id",row.id)
     
  onMounted(() => {
    fetchData()
  })
</script>

Solution

  • I finally got this to work. There were couple of issues, the main issue was not having the appropriate supabase "delete" policy in place, also changed the table template to make it simple.

    Here is the updated working template and script:

    const deleteRow = async (id) => {
    const { data, error } = await supabase
      .from('Contractor_Payment')
      .delete()
      .eq("id", id);

    if (error) {
      console.error('Error deleting row:', error)
    } else {
      console.log('Row deleted:', id)
      // Optionally, update your UI to reflect the deletion
    }
  }
   
  onMounted(() => {
    fetchData()
  })

</script>
  
 <!-- Bind the data to the data-source attribute -->
 <template>
  <showModel />
  <modalTest />
     <div>
      <table>
        <tr v-for="row in posts" :key="row.id">
          <td>{{ row.fullName }}</td>
          <td>{{ row.amount }}</td>
          <td>{{ row.id }}</td>
          <td><button @click="deleteRow(row.id)">Delete</button></td>
        </tr>
      </table>
    </div>
  </template>