无法在Vue Js CLI组件系统中正确拼接数组值

Question

对不起，我的英语不好

问题

请参阅 https://onlinemercato.netlify.com

我正在构建用于作业的Web应用程序，并且在Vue CLI组件中遇到了最后一个问题。
我的组件是这样组织的：

 - App
     - Basket
     - players-list

详细信息

我已经制作了一个篮子系统，当我从“玩家列表”中添加一个玩家时，会将其对象添加到篮子数组中。如果我添加相同的播放器，属性“数量”也会增加。

我处于绑定:key="item.id"的for循环中，并且在每次迭代中都传递了按钮index中的@click设置。 我单击执行remove（index）函数的删除按钮，索引正确传递但未删除，或者它在错误的索引上删除。

我的问题来自篮子组件中的删除功能，当初始阵列来自本地存储时，该功能起作用。当我刚推送新播放器（不重新加载）时，我得到了奇怪的行为。

它不会删除，也不会删除先前的索引，例如，如果我的数组中有2个播放器，那么我将在index=1而不是index=0删除一个播放器。

代码

我遵循在组件之间传递var的方法。

players-list.vue

html

//in a for loop (player of players) + :key="player.id"
button(@click.prevent="add(player)") Ajouter au panier

Js

//in my component just quote before i get a value from another component but no problems at this point
    add: function(toAdd) {
      //console.log(toAdd);
      this.$emit("addBasket", toAdd);
    }

app.vue

在这里我在函数中传递了一个对象，它们都运行良好，并且在这一点上我并没有失去反应性

html

<Basket class="basket" msg="Panier" :basketVal="basket" @nbBasket="baskRecup"/>
<players-list id="players" msg="Catalogue" :number="number" :value="players" @addBasket="toAdd"/>

js

export default {
  name: "app",
  data() {
    return {
      players: {}, //using players object to define it's an object
      number: 0, //same for total players number
      basket: null, //use null to don't compute basket with empty object on condition
      basketNumber: 0 //INIT BASKET NUMBER
    };
  },
    toAdd(newVal) {
      //sending a player object to add in basket
      // console.log(newVal);
      // console.log("========");
      // console.log(this.basket)

      this.basket = newVal;    
      //way to notify (reactive) a change when adding same player 
      this.basket.__ob__.dep.notify();//i'm forcing reactivity here
    }
}

basket.vue

在这里变得有趣

html

//pug syntax 
          tr(v-for="(item,id) in selected" :key="item.id")
            td {{id}}
            td {{item.name}}
            td {{item.price}} M €
            td {{item.qte}}
            td 
              button(@click.prevent="remove(id)")  Delete

js

export default {
  name: "Basket",
  props: ["msg", "basketVal"],
  data() {
    return {
      selected: [],
      active: false,
      total: 0,
      nb: 0,
      th: ["id", "Nom", "Prix", "Quantité", ""]
    };
  },
  computed: {
    basket: function() {
      //on initializing to avoid a empty object push
      if (this.basketVal != null) {
//function wich return false if object isn't the same
        let indexQte = this.getQte(this.basketVal, this.selected);

        if (indexQte !== false) {

          this.selected[indexQte].qte++;

        } else {

          this.selected.push(this.basketVal);
        }
        this.saveBasket();
        return this.selected;
      }
    },
mounted() {
    // On initialising get items of basket local storage space
    if (localStorage.getItem("basket")) {
      try {
        this.selected = JSON.parse(localStorage.getItem("basket"));
      } catch (e) {
        localStorage.removeItem("basket");
      }
    }
    return this.selected;
  },
watch: {
    //watching values to keep items reactivity
    basket: function() {
      return this.selected;
    },
    selected: function() {
      return this.selected;
    }
  },
methods: {
    saveBasket: function() {
      //SAVE IN LOCAL in "basket space"
      localStorage.setItem("basket", JSON.stringify(this.selected));
    },

    remove(index) {
      //console.log(index);
      console.log(this.selected[index]);



      if (this.selected[index].qte > 1) {
        this.selected[index].qte--;
      } else {
        let nindex = this.selected.indexOf(index);
        this.selected.splice(nindex, 1);
      }
      //this.selected.__ob__.dep.notify();

      //this.selected[index] = undefined;

      this.saveBasket();
      //return this.selected;
    },
   }
}//end vue comp

非常感谢帮助<3;