Vue: удалить элемент из массива, когда он передается в качестве компонента для компонента?

Question

Я очень новичок в Vue.js.

Сначала я искал, как это сделать (удаление элемента из массива, учитывая только элемент в массиве), но все, что я нашел, это ссылки налибо метод delete, либо вызов slice в списке ... что, конечно, уместно, но не отвечает на мой вопрос.

Я сделал здесь скрипку:

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

В идеале я хочу нажать «Удалить», чтобы удалить вкладку и панель вкладок.

Есть ли способ сделать это, не передавая список в качестве реквизита?

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, решение будет более элегантным.

Answer 2

Отправляя событие от компонента к родителю.Я раздвоил код, вот ссылка https://jsfiddle.net/gfa3psg1.

создание излучателя

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;
                });
    });

Answer 3

Я разобрал ваше jsfiddle с решением https://jsfiddle.net/budgw/eyxppq4j/1/

Самый простой способ, который я считаю, - использовать событие для кнопки remove.Это событие содержит объект табуляции, затем ваш родительский компонент (здесь ваше приложение Vue) прослушивает это событие и удаляет вкладку из списка.

Мне нравится думать о событиях и подобных вещах следующим образом: события - это способпередавать данные родительскому компоненту, а реквизиты - дочерним.