vue-strap icon indicating copy to clipboard operation
vue-strap copied to clipboard

v-model on checkboxes inside button group

Open crowincage opened this issue 6 years ago • 2 comments

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?

crowincage avatar May 30 '18 09:05 crowincage

Read the docs. Example there works. I think button-group has v-model, then each checkbox has a true-value attribute.

gswilcox01 avatar May 30 '18 20:05 gswilcox01

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!

crowincage avatar May 31 '18 13:05 crowincage