How to disable component reuse?

Scenario:

I have two components of the same class Slider: SliderA and SliderB. Slider B is rendered first. I set SliderA to 20 and SliderB to 50. If I delete SliderB, SliderA reuses SliderB which in turn shows up as 20.

Any approach for this?

Look the up the key attribute in the guide.

1 Like

Works like charm! Thank you very much.

Update: Adding the link in case someone missed it too: https://vuejs.org/v2/guide/list.html#key

I’m on the same problem now… and key is of no use. Imagine the following scenario:

data{ items: [] }
add_item() { this.items.push( { id: null, text: ‘’ } ) }

The user can add as many items/fields (TinyMCE fields) as needed and then write on them, at that point they don’t have any id assigned, so deleting one gives me the same results as OP posted.

There should be a way to disable reusability for specific child components. In this case I’m dealing with a vue component as a wrapper for a TinyMCE editor and it simply doesn’t get updated properly. Also could be useful to let know a (complex) component when it is being reused.

Why don’t you add an id?

I think it would be worth it to just highlight, in the doc, the fact that :key is not related to v-for (it is mentioned but it is probably a bit confusing)