Setting 'checked' property in checkbox from related button

Please see the code below. In there, I use Laravel blade syntax to loop over an array of checkboxes. Next to each checkbox is a button. The idea is that when you click the button, the checkbox must become checked.

<div class="panel-body">
                        @foreach($colors as $color)
                            <input type="checkbox" id="{{ $color->id }}" value="{{ $color->name }}" v-model="checkedColors" v-bind:id="checkedColors">
                            <input type="button"
                                   style="background-color:{{ $color->code }};color:{{ $color->font or 'white' }}"
                                   value="{{ $color->name }}" title=""
                                v-on:click="checkedColors.checked = true"
                            >
                        @endforeach
</div>

At present nothing happens. I've tried various combinations but I still can't get it right. I guess I am missing something fundamental. Please assist.

topvillas

8 years ago

Best Answer

Level 46

You don't need to set the checked property. Just a boolean is needed for the model bound to the checkbox.

v-on:click="checkedColors = true"

https://vuejs.org/v2/guide/forms.html#Checkbox

1 like

eugenefvdm

8 years ago

Level 31

@topvillas thank you so much for you reply.

I'm sure your suggestion will work but I struggled for hours with the original problem and then eventually gave up. The reason being is that clicking the button seems to cause a focus event on the button, and then in spite of my Vue code the checkboxes only become clicked once it's blurred somewhere else, anywhere else, a checkbox, a slider, etc.

So now I'm just wrapping the checkboxes in labels, which is probably a lot more technically correct.

Please or to participate in this conversation.