javascript - Vue : delete an item from array when it is passed as a prop to a component?

Question

我对 Vue.js 非常陌生。

我首先搜索了如何执行此操作(从数组中删除元素，仅给出数组中的元素)，但我发现的只是对 delete 方法或调用 的引用>slice 在列表中...这当然是相关的，但没有回答我的问题。

我在这里做了一个 fiddle :

https://jsfiddle.net/SumNeuron/d2a9j2mh/

理想情况下，我想单击删除来删除选项卡和选项卡 Pane 。

有没有办法在不将列表作为 Prop 传递的情况下执行此操作？

Answer 1

这是您的期望吗:https://jsfiddle.net/ittus/Lost5djd/ ？

单击删除按钮时发出事件

  methods: {
    remove: function() {
      console.log(this, this.tab)
      this.$emit('remove', this.index)
    }
  }

并在父组件上监听

  methods: {
    onRemove(index) {
      this.groups =  [
       ...this.groups.slice(0, index),
       ...this.groups.slice(index + 1)
     ]
    }
  }

如果每个选项卡都有一个id，解决方案将会更加优雅。