Vue Js Remove/Delete array from an array of arrays: To remove/delete an array from an array of arrays in Vue.js, you can use the splice() method. This method changes the contents of the original array by removing or replacing existing elements and/or adding new elements.
To remove an array at a specific index from the array of arrays, you can call the splice() method on the outer array and pass in the index of the array to remove and the number of elements to remove, which is 1 in this case
How can I remove or delete an array from an array of arrays in Vue js?
The code for removing an array from an array of arrays in Vue.js. Here is an explanation of what’s happening in the code:
- The
arrayOfArraysdata property is an array of arrays, where each inner array represents a row in a table, for example. - The
v-fordirective is used to loop through each inner array and display its contents in a list item. - The
removeArraymethod is called when the “Remove Array” button is clicked. It takes the index of the inner array to remove as an argument and uses thesplicemethod to remove it from thearrayOfArrays
Vue Js Remove/Delete array from an array of arrays Example
<div id="app">
<ul>
<li v-for="(item, index) in arrayOfArrays" :key="index">
{{ item }} <button @click="removeArray(index)">Remove Array</button>
</li>
</ul>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
arrayOfArrays: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
};
},
methods: {
removeArray(index) {
this.arrayOfArrays.splice(index, 1);
}
}
});
</script>
Output of Vue Js Remove/Delete array from an array of arrays
