Problem with removing a specifc object of a list

Question

I have a problem for removing a specific element in a list.

I have used splice who is supposed to cut the element at a certain point but it always remove the last element.

<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>

I have tried different ways but it always destroys the last element.

Does someone has an explanation or an idea.

I have edited the Question i hope it make it clearier.

Why do you need i-- you a re checking against the length of the array which should change with a splice? — Michael
– Michael, Commented Dec 23, 2019 at 13:05
I have saw this way on love2dev.com/blog/javascript-remove-from-array but before i was using for (let i = 0; i < this.Youtube.length; i++) { console.log('i = ', i) console.log(this.Youtube[i].deleted) if (this.Youtube[i].deleted === true) { console.log('i = ', i) this.Youtube.splice(i, 1) } } — Ramatoy
– Ramatoy, Commented Dec 23, 2019 at 13:07

TKoL · Accepted Answer · 2019-12-23 13:08:30Z

1

Iterating over an array by i as index, when you're potentially changing the array as you're iterating, is definitely going to give you bugs

What about something like this?:

var RandomClass = {
  // this is how i update
  Youtube: [],

  UpdateYT: function () {
      // console.log('Youtube => ', this.Youtube)
      this.Youtube = this.Youtube.filter(yt => !yt.deleted);
  },

  addCardYT: function (num) {
    this.Youtube.push({deleted: false, num:num})
  },
}

RandomClass.addCardYT(1);
RandomClass.addCardYT(2);
console.log(RandomClass.Youtube);
RandomClass.Youtube[0].deleted = true;
RandomClass.UpdateYT();
console.log(RandomClass.Youtube);

[edit]

If you insisted on wanting to iterate over i and delete them as they come up, what you should do is start at the end of the array and work your way backwards.

answered Dec 23, 2019 at 13:08

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ramatoy Over a year ago

I have tried your method but it still remove the last element

TKoL Over a year ago

I don't really understand what you mean. You haven't really given me much to work with there

Ramatoy Over a year ago

I have edited the question i hope it make my problem easier to understand. Sorry. @TKol

Ramatoy Over a year ago

Your answers were great I just had a problem with my card

enbermudas · Accepted Answer · 2019-12-23 13:17:40Z

0

const youtube = [
    { id: 1, deleted: false },
    { id: 2, deleted: true },
    { id: 3, deleted: false },
    { id: 4, deleted: true },
    { id: 5, deleted: true },
    { id: 6, deleted: false },
];

console.log('Initial', youtube);

const update = () => {
    let i = youtube.length - 1
    while (i != 0) {
        if (youtube[i].deleted) youtube.splice(i, 1);
        i--;
    }
}

update();

console.log('Updated', youtube);

Edit: TKoL was right; iterating over an array like that can create bugs if two consecutive elements need to be removed. Iterating over it backwards should work just fine.

edited Dec 23, 2019 at 13:17

answered Dec 23, 2019 at 13:10

enbermudas

1,6254 gold badges24 silver badges44 bronze badges

3 Comments

TKoL Over a year ago

The bug with iterating over i like this is that if two consecutive values need removing, then you'll probably only remove one of them

TKoL Over a year ago

Iterate backwards over an array in this case, if you want to. Removing an item at the end of an array doesn't affect the index of an item at the beginning of the array, but the reverse isn't true.

Ramatoy Over a year ago

@TKoL I have tried both but i still have the same problem. I have reedited it again and i still have the problem

Collectives™ on Stack Overflow

Problem with removing a specifc object of a list

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related