Struggling with removing a specific element from a list.
Despite using the splice method to cut out an element at a specific point, it always ends up removing the last one instead.
<template>
<div>
<v-row>
<v-col>
<h3>Steam</h3>
<v-btn class="mx-2" fab dark color="purple" @click="addCardSteam">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
<v-col>
<h3>Map 2D et 3D</h3>
<v-btn class="mx-2" fab dark color="cyan" @click="addCardMaps">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
<v-col>
<h3>Youtube</h3>
<v-btn class="mx-2" fab dark color="red" @click="addCardYT">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<YTCard v-for="(card, index) in Youtube"
v-bind:key="index"
v-model="card.deleted"
@input="UpdateYT"></YTCard>
</v-col>
</v-row>
</div>
</template>
<script>
import YTCard from './YoutubeCard'
export default {
data: () => ({
Steam: [],
Maps: [],
Youtube: [],
YT: 0
}),
methods: {
UpdateYT: function () {
console.log('Youtube => ', this.Youtube)
this.Youtube = this.Youtube.filter(yt => !yt.deleted)
},
addCardYT: function (num) {
this.YT = this.YT + 1
this.Youtube.push({deleted: false, num: this.YT})
},
addCardMaps: function () {
this.Maps.push({deleted: false})
},
addCardSteam: function () {
this.Steam.push({deleted: false})
}
},
components: {
YTCard
}
}
</script>
<style scoped>
</style>
Tried numerous approaches but still ends up deleting the final element.
Any insights or suggestions are greatly appreciated.
Updated the Question for clarity.