Vue Js Table with Edit and Delete Button:Vue.js is a popular JavaScript framework used to build web applications. To create a table with edit/update and delete buttons in Vue.js, you can start by defining a data array to hold the table rows.
Next, use the Vue.js v-for directive to loop through the data and display the table rows. For each row, add edit/update and delete buttons that trigger methods when clicked.
In the edit/update method, you can create a form that allows the user to update the data and save it back to the data array. In the delete method, you can remove the selected row from the data array.
Overall, this approach provides an efficient and user-friendly way to manage data in a table and allows for easy editing and deleting of rows.
How can I create a Vue js table that includes edit and delete buttons for each row?
To create a Vue.js table with edit and delete buttons, you can use the Vue.js framework to easily implement the UI components. First, create a data array containing the table rows and columns. Then, use the v-for directive to loop through the data and render each row as a table row. Add two columns at the end of each row for the edit and delete buttons, and bind a click event to each button. Finally, create methods for handling the edit and delete events, which can update the data and the UI accordingly.
Vue Js Table with Edit and Delete Button Example
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" :key="index">
<td v-if="!row.editing">{{ row.name }}</td>
<td v-if="!row.editing">{{ row.email }}</td>
<td v-if="row.editing"><input type="text" v-model="row.name"></td>
<td v-if="row.editing"><input type="email" v-model="row.email"></td>
<td>
<button v-if="!row.editing" class="edit-button" @click="editRow(row)">Edit</button>
<button v-if="row.editing" class="save-button" @click="saveRow(row)">Save</button>
<button class="delete-button" @click="deleteRow(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
<button @click="addRow" class="add-button">Add Row</button>
</div>
<script type="module">
const app = Vue.createApp({
// Define the data properties and methods for the app
data() {
return {
rows: [
{ name: 'John', email: 'john@example.com', editing: false },
{ name: 'Jane', email: 'jane@example.com', editing: false },
{ name: 'Bob', email: 'bob@example.com', editing: false }
]
}
},
methods: {
editRow(row) {
row.editing = true;
},
saveRow(row) {
row.editing = false;
},
deleteRow(index) {
this.rows.splice(index, 1);
},
addRow() {
this.rows.push({ name: '', email: '', editing: true });
}
}
});
app.mount("#app");
</script>
Output of Vue Js Table with Edit and Delete Button
