Как изменить код, чтобы работало?

Question

[slagoris]

Привет. Я очень новичок во vue. Не пойму, как исправить код, чтобы работало. в for еще добавил переменную index, чтобы по индексу делать splice. Но есть еще один метод, который показывает модалку, его надо тоже вызывать по клику. Если вынести places.splice(index, 1) в метод, то у this, как я понимаю теряется контекст... и не работает, удаляет только первый элемент. Может как-то можно сделать @click="places.splice(index, 1) и еще один метод"... Как два метода вызвать понимаю, но как вынести @click="places.splice(index, 1)" и чтобы не изменился функционал не соображу ((. Извините, может очень сложно описал и как-то непонятно... Прошу помощи.

<li class="place-card"
                :class="{ inactive: !place.active }"
                v-for="(place, index) in places"
                :key="place.item"
            >              
                <button
				                class="btn place-card__btn place-card__btn_del"
				                @click="places.splice(index, 1)"
                >
	                Удалить
                </button>
              </div>
            </li>

Answer 1

[Сергей Соколов]

У вас там лишний закрывающий тег </div> и по кнопкам не видно, какой именно элемент удаляется. Вот фиддл, в котором работает, как у вас задумано:

Comments

[slagoris]

да не смотрите на теги, просто может я лишнее удалил... с закрывающими там все норм. Как добавить к кнопке удалить по клику, дополнительно к сплайс еще и метод вызова модалки? Кнопкой удаляется элемент ли с классом place-card.

[Сергей Соколов]

slagoris, обновил фиддл. Контекст не теряется, там все ок.

[slagoris]

Сергей Соколов, showPlaceDeletionDialogModal(place) {
this.places.splice(this.places.indexOf(place), 1);
this.$store.commit("showModal", {
name: "PlaceDeletionDialogModal",
props: null,
isShown: true,
});
},

чуть под себя и оу май, все работает). Спасибо, добрый человек.