@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 и удали его"?
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
@MrDecoy
Верставший фронтендер
Если я всё верно понял, то:
remove() {
  this.arr = this.arr.filter( button => button !== this.active)
}


а ещё круглые скобки тут вам не нужны у remove(). То есть просто remove
<button @click="remove()">Remove active button</button>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
Как это не знаете его индекс?

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

@click="remove(index)"

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы