Как удалить элемент массива не зная его индекс?

Question

[r_g_b_a]

Здравствуйте.
Есть такой пример:

<div id="app">
  <button v-for="button in arr" @click="active = button">{{button}}</button>
  <button @click="remove()">Remove active button</button>
</div>

new Vue({
  el: "#app",
  data: {
  	active: null,
    arr: ['a', 'b', 'c']
  },
  methods: {
		remove() {
			
    }
  }
})

При нажатии на "Remove active button" должна удаляться активная кнопка.
Я знаю, что можно в цикле v-for можно получить индекс, а потом удалить нужный элемент массива методом .splice(index, 1);
Мой вопрос заключается в следующем: при нажатии на кнопку выбранный элемент массива я полностью присваиваю переменной active. Уже на основании этой информации можно определить положение данных в массиве?
Или может быть есть другой способ удаления без необходимости использовать index и .splice()?
Другими словами, можно сказать "vue, найди active внутри arr и удали его"?

Answer 1

[Вадим]

Если я всё верно понял, то:

remove() {
  this.arr = this.arr.filter( button => button !== this.active)
}

а ещё круглые скобки тут вам не нужны у remove(). То есть просто remove

<button @click="remove()">Remove active button</button>

Comments

[Вадим]

r_g_b_a, если ответ решил Ваш вопрос - отметьте его как решение.

Answer 2

[Дима Паутов]

Как это не знаете его индекс?

v-for="(button, index) in arr" и сразу появился индекс

@click="remove(index)"

И не нужно придумывать странных решений.
Но если нужно не понятные решения, то на основе active вы можете сделать фильтр массива по свойству, находящимся в active

computed: {
  newArray () {
    return this.arr.filter(item => item.id === this.active.id)
  }
}

Ну или какое-то другое свойство, которое может лежать в active. Суть вы поняли

Comments

[Вадим]

у автора нет отдельных кнопок для удаления. У него одна кнопка для удаления активных