Vue: Removing element from iterated array with chekbox does not update the model containing the values of the selected checkboxes

[ragnarlotus]

Vue.js version

2.0.2

Reproduction Link

http://jsfiddle.net/0eoon3jz/5/

Steps to reproduce

Select the last checkbox or all, then click in the button to remove the last checkbox.

What is Expected?

Expected to remove the value of the checkbox removed from the selecteds variable

What is actually happening?

The value of the removed checkbox remains in the array with the selected checkboxes

Thank you for all your effort!!

[rajibahmed]

I don't think your expectation from the code is right. You are removing from the items are with the removeItem function. What does it have to do with v-model selected ?

You have added values to your v-model from items.
Then you removed / deleted items ... so you model data is not affected any way.

//Best

[defcc]

@deulos check this issue #3958

Seems to be the same problem. You could use this as a workaroud

[ragnarlotus]

@defcc it is not the same. When I check or uncheck the checkboxes the model containing the values of the selected checkboxes is updated properly.

@rajibahmed my problem is that if I have a checked checkbox binded to a model, when I remove it feels logical to me to remove its value from the model also.

[rajibahmed]

@deulos

Vue 2.0 is more declarative and less magic. If I have faced this problem I would have to write my own code to solve this, you can add a watcher ( I guess ) to solve this problem.

//Best

[LinusBorg]

@deulos it might seem logical for your usecase, but might not be for someone elses. Maybe someone whant to hide all of the inputs (with v-if), but keep the selected values?

This is a question of your application's logic, and not something Vue should decide for you.