Dynamic Form in Vue - checkbox stays checked

Question

I have a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute. Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false

<select @change="onChange" ...
<input type="checkbox" :checked="checked()" ...

The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice

Answer 1

To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:

<input type="checkbox" :checked="checked" ...

So your checked function shouldn't have parens on it.

If that's not the issue, please post the rest of your component so we can see the script and data values.

Answer 2

Agreed with @DRich here but you can use @input method to call a method

<select @input="onChange" ...

I use this most of the time