How to change the code to make it work?

Question

Vue.js

Hello. I am very new to vue. I don't understand how to fix the code to make it work. I also added the index variable to the for in order to splice by index. But there is another method that shows the modal, it must also be called on click. If you put places.splice(index, 1) into the method, then this, as I understand it, loses its context... and it doesn't work, it removes only the first element. Maybe somehow you can do @click="places.splice(index, 1) and another method"... I understand how to call two methods, but how to take out @click="places.splice(index, 1)" and so that the functionality has not changed, I don’t understand ((. Sorry, it can be very difficult to describe and somehow incomprehensible ... Please help.

<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

You have an extra closing </div> tag there and you can't see by the buttons which element is being deleted. Here is a fiddle in which it works as you intended: