Vue: Why 2 list items (in slot) are deleted instead of single item when v-for's counter is mutated

1

In this CodeSandbox Demo, in child component (list.vue) a list of p tags, are rendered with v-for="(item, idx) in czCounter.

Child component (with list in slot) in parent

<list>
    <div class=cz-container>
        <a @click="czCounter++" class="btn-add"> + </a>
        <p v-for="(item, idx) in czCounter"
            class="cz-item"
            :key="idx"
            :ref="`slide1zone`"
            :czId="idx">
            {{item}}
            <a @click="deleteCurrentChildZone(idx)"class="btn-delete"> - </a>
        </p>
    </div>
</list>

When I call deleteCurrentChildZone to remove the current p tag and then mutate this.czCounter--, two items are deleted from the list instead of the single/current p tag.

I know el.remove() might be unnecessary but I am more interested in knowing when el.remove() and then parent’s property this.czCounter is mutated (decremented) why does Vue deletes 2 items instead of one.

I am interested in learning what Vue is actually doing, when element is removed (el.remove()) and this.czCounter is mutated (decremented).

Thanks

2

well, you are “remove()”-ing it AND doing list-- in the next tick.

so, thats 1 + 1 = 2.
you are removing 2 items…

but, to be honest, this is not how you structure vue in general. you’d probably have “real” items, which are prob objects. so ur data will prob look something like this:

data() {
return {
list: [
{
obj_id: 1,
value: “my-awesome-value”,
etc
}
{
obj_id: 2,
value: "asdfasdsadfsasf

and then, in ur html, you wont have the ref, and in the methods, not the this.refs, but you slice() out the correct index, by finding the correct obj_id.