Невозможно удалить элемент из массива компонентов (slice, Vue.js)

Question

Я пытаюсь реализовать динамическое добавление и удаление компонентов в Vue.js.

Существует проблема с методом слайса, в основном он должен удалять элемент из массива по переданному индексу. Чтобы изменить массив, я использую slice (i, 1) .

Согласно этому ответу, изменение массива таким образом должно помочь мне, но оно не работает.

Что я делаю не так?

Вот мой код и кодовая ручка :

<div id="app">
  <button @click="addNewComp">add new component</button>
  <template  v-for="(comp,index) in arr">
    <component 
     :is="comp"
     :index="index"
     @remove-comp="removeComp(index)"
     ></component>
  </template>
</div>
<script type="text/x-template " id="compTemplate"> 
  <h1> I am a component {{index}} 
  <button v-on:click="$emit('remove-comp')">X</button>
  </h1>
</script>

---

 const newComp = Vue.component("newComp",{
  template:"#compTemplate",
  props:['index']
})

new Vue({
  el:"#app",
  data:{
    arr:[newComp]
  },
  methods:{
    addNewComp:function(){
      this.arr.push(newComp);
        console.log(this.arr);
    },
    removeComp:function(i){
      console.log(i);
       this.arr.slice(i,1);
       console.log(this.arr);
    }
  }
})

Answer 1

 const newComp = Vue.component("newComp",{
  template:"#compTemplate",
  props:['index']
})

new Vue({
  el:"#app",
  data:{
    arr:[newComp]
  },
  methods:{
    addNewComp:function(){
      this.arr.push(newComp);
    },
    removeComp:function(i, a){
      console.log('i', i, a, typeof i);
      this.arr.splice(i,1);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
  <button @click="addNewComp">add new component</button>
  <template  v-for="(comp,index) in arr">
    <component 
     :is="comp"
     :index="index"
     @remove-comp="removeComp(index, 100+index)"
      :key="`${index}`"
     ></component>
  </template>
</div>
<script type="text/x-template " id="compTemplate"> 
  <h1> I am a component {{index}} 
  <button v-on:click="$emit('remove-comp')">X</button>
  </h1>
</script>

Я прочитал это, прежде чем делать с Vue и реактивными состояниями. .slice() не реагирует, поэтому возвращает копию данных без изменения оригинала (т.е. не реагирует). Используйте .splice(), который является реактивным или даже лучше посмотрите на .filter() здесь

Answer 2

Вы используете метод среза вместо метода сращивания , как указано в приведенной вами ссылке.

deleteEvent: function(index) {
  this.events.splice(index, 1);
}