Level 73
Actually this.czCounter-- is what causes two items to be deleted instead of one.
Take a read at this answer here:
It explains more on why this happens. It is basically because you use the index as a :key prop to the for loop.
Dec 25, 2019
6
Level 1
Vue: Why 2 list items (in slot) are deleted instead of single item when v-for’s counter is mutated
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
Level 1
@dkj , Can you reproduce your issue here at this link: https://jsfiddle.net/hitesh399/52xo7b3h/ ?
Level 1
@nakov , I am totally agree with you, I am trying to do the same at link: https://jsfiddle.net/hitesh399/52xo7b3h/, and i am not getting any issue. So Can you help me if this issue is due to :key prop then why is this working on above link ?
Level 73
@hitesh399 it might be because of using <slot> have you tried fixing it on his environment:
https://codesandbox.io/s/component-slot-list-deletion-problem-d7882
Level 1
I think When you use the JavaScript native function like remove then VueJs life cycle events do not call. Because Vuejs work on 2 way data binding that means If data will change then DOM will update automatically. In your case If you will delete last element then it will work fine.
Reason -> suppose: czCounter value is 3 then element keys will be like: 0,1,2
Case when you delete last index: step 1 you deleted DOM direct using JavaScript native function, that mean no life cycle element will call, Step 2: you decrease the variable value then vueJS life will Call and loop will work on index 0, and 1 and update the DOM, You will never face any issue.
Case when you delete any index except last one: Suppose you are deleting 1 index and decrease the variable value, then again loop will run for index 0, 1 but here you already delete the element 1 so it does not display on page. reason when data updates then DOW also only update not create.
1 like
Please or to participate in this conversation.