Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 0

    1. Instide you template pass a value row

      <a-button @click="deleteRow(row)">Delete</a-button>

    2. Then check what you have in console.log inside deleteRow method

    3. Find item id

    4. It maybe looks like this

      <a-button @click="deleteRow(row.record.id)">Delete</a-button>

    5. Then you need to get id from deleteRow argument

      const deleteRow = async (id) => {
  console.log(id) // check you get id
  const { data, error } = await supabase
    .from("Contractor_Payment")
    .delete()
    .eq("id", id);

  if (!error) {
    fetchData();
  } 
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search