Javascript Vue：当项目作为道具传递给组件时，是否从数组中删除该项目？

我是Vue.js的新手

我首先搜索了如何执行此操作（从数组中删除一个元素，仅给定数组中的元素），但我找到的是对

delete

方法的引用，或者调用列表中的

slice

。。。这当然是相关的，但不能回答我的问题

我在这里拉了把小提琴：

理想情况下，我希望单击“删除”以删除选项卡和选项卡窗格

---

有没有一种方法可以在不将列表作为道具传递的情况下做到这一点？

我为您的JSFIDLE提供了一个解决方案

我认为最简单的方法是在

remove

按钮上使用事件。此事件包含tab对象，然后您的父组件（此处为Vue应用程序）将侦听此事件并从列表中删除该选项卡

---

我喜欢这样思考事件和道具：事件是一种将数据提供给父组件的方式，而道具将数据提供给子组件。

我为您的JSFIDLE提供了一个解决方案

我认为最简单的方法是在

remove

按钮上使用事件。此事件包含tab对象，然后您的父组件（此处为Vue应用程序）将侦听此事件并从列表中删除该选项卡

我喜欢这样思考事件和道具：事件是一种将数据提供给父组件的方式，而道具将数据提供给子组件。

这是您的期望：

我在单击“删除”按钮时发出事件

  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

，解决方案将更加优雅。

这是您的期望吗：

我在单击“删除”按钮时发出事件

  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

，则解决方案将更加优雅。

通过从组件向父级发出事件。 我已经分叉了代码，这里是链接

创建发射器

var __emiter = new Vue();

从按钮发射

__emiter.$emit('deleteTab', this.tab);

从应用程序捕获

__emiter.$on('deleteTab', (group) => {
        this.groups = this.groups.filter(function(_group) {
                return _group.title !== group.title;
                });
    });

---

通过从组件向父级发出事件。 我已经分叉了代码，这里是链接

创建发射器

var __emiter = new Vue();

从按钮发射

__emiter.$emit('deleteTab', this.tab);

从应用程序捕获

__emiter.$on('deleteTab', (group) => {
        this.groups = this.groups.filter(function(_group) {
                return _group.title !== group.title;
                });
    });

---

这是我的期望。我今天早上开始使用Vue。到目前为止，我的方法还可以吗？或者你对我到目前为止所做的有什么其他建议吗？这是我的期望。我今天早上开始使用Vue。到目前为止，我的方法还可以吗？或者你对我到目前为止所做的有什么其他建议吗？哎呀，我忘了点击更新按钮；-），我用正确的链接编辑了我的答案。哎呀，我忘了点击更新按钮；-），我用正确的链接编辑了我的答案。