<script>
import { datalist } from "./datalist";
export default {
name: "HelloWorld",
components: {},
data() {
return {
items: datalist,
};
},
methods: {
deleteEvent(id) {
this.items = this.items.filter((e) => e.id !== id);
},
},
};
</script>My data...
export const datalist = [
{ id: 1, val: "11", kk: "potter" },
{ id: 2, val: "22", kk: "james" },
{ id: 3, val: "55", kk: "limda" },
{ id: 4, val: "77", kk: "stepen" }
];
<div>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
{{ item.kk }}
</router-link>
<input type="checkbox" :value="item.id" />
<button @click="deleteEvent(item.id)">Delete</button>
</div>
</div>My complete code;- https://codesandbox.io/s/wild-flower-rssg0?file=/src/components/datalist.js
I aim to remove entries from the array when the user checks the checkbox next to each entry and then clicks the delete button.
Currently, I am able to delete an array record by clicking directly on the delete button without first checking the checkbox. However, the deletion should only occur after both actions - checkbox selection followed by the delete button click.
In my code, I have set up a method to handle the deletion process upon clicking the button, but it is not functioning as intended. Can anyone provide assistance in identifying what may be causing the issue with the code?