vue-strap
vue-strap copied to clipboard
v-model on checkboxes inside button group
I try to implement a simple button group with checkboxes to define an address type. The model looks like this:
{ ... isClient: boolean, isSupplier: boolean, isManufacturer: boolean, ... }
If I use the button group like this with checked = []
<button-group v-model="checked"> <checkbox name="isClient"> Client </checkbox> <checkbox name="isSupplier"> Supplier </checkbox> <checkbox name="isManufacturer"> Manufacturer </checkbox> </button-group>
it's not possible to check a single button. If I check for example the isClient checkbox all types are set to true - not just the client checkbox which is expected.
If I use v-model on the checkboxes directly
<button-group> <checkbox v-model="address.isClient" name="isClient"> Client </checkbox> <checkbox v-model="address.isSupplier" name="isSupplier"> Supplier </checkbox> <checkbox v-model="address.isManufacturer" name="isManufacturer"> Manufacturer </checkbox> </button-group>
only selected checkboxes are set to true - which is the desired behaviour - but I got an javascript error in the console because checkbox is trying to update the parent (Cannot read property 'indexOf' of null).
So I see no way to implement this case without javascript error. Any suggestions please?
Read the docs. Example there works. I think button-group has v-model, then each checkbox has a true-value attribute.
Of course I've read the (sadly often incomplete) docs @gswilcox01 !
If you've read my question you could see that I'm trying to bind a different model - which simply is not possible in this way. Used a hack.
thanks anyway!