I am currently working on displaying server data in a table. The delete function is functioning properly, but the deleted item only disappears from the table after refreshing the page. Is there a way to trigger a re-render of the component after deleting an item? Using this.$forceUpdate did not yield any results.
This is the delete function implementation:
async deleteProduct(id) {
const resp = await fetch(`http://localhost:3005/products/${id}`, {
method: "DELETE",
});
}
Below is the code for the table:
<table border="1">
<tr>
<th>Product</th>
<th>Title</th>
<th>Price</th>
<th>Options</th>
</tr>
<tr v-for="product in products" :title="product.description">
<td><img :src="product.image" :alt="product.title"/></td>
<td>{{ product.title }}</td>
<td>{{ `${product.price}$` }}</td>
<td>
<button @click="toggleEdit(product._id)">edit</button>  
<button @click="deleteProduct(product._id)">delete</button>
</td>
</tr>
</table>