Checkbox Group not updating v-model and not emitting change event about buefy

[thc1967]

Hi Rafael,

The original source is up there in my first post. The tag in question is the <p> tag that I put around the <b-checkbox-group> tag. With the P tag in there, it fails, Without the P tag, it works.

[rafaberaldo]

Thanks for the very well explained issue, could you update to v0.3.1 and see if the behavior is still the same? I'm not sure but I think 38a0ac8 fixed this 👍

[thc1967]

Thanks, Rafael, for the swift reply. I hoped to reply as swiftly, but then my bosses dropped a bunch of beer on the conference table and I got... distracted. :)

I've updated my package.json to include "buefy": "^0.3.1", then ran npm update then rebuilt from all my sources.

Results are the same as in my original post. :(

I really think I've missed something here, but I can't figure out what it is.

To edit a bit...

When I add a v-model value to the first checkbox and then checking it, I see that its props.value becomes True when I check it, as opposed to staying False before I put a v-model value onto it. Nothing else in the checkbox group behavior changes though.

[thc1967]

Found something more. In my original HTML, I wrapped each checkbox into a div tag to make the list vertical, which is what I want and how the documentation page shows to do it.

When I pull the div tags off of the b-checkbox elements, it works as expected. New HTML:

            <b-checkbox-group v-model="clients" @change="groupChange">
                <b-checkbox custom-value="1" @change="checkChange">Item 1</b-checkbox>
                <b-checkbox custom-value="2">Item 2</b-checkbox>
                <b-checkbox custom-value="3">Item 3</b-checkbox>
                <b-checkbox custom-value="4">Item 4</b-checkbox>
            </b-checkbox-group>

Removing the div tag around each b-checkbox actually changed a considerable number of things about how everything was rendered and behaved. In the Chrome Vue utility, the b-checkbox elements are now children of the b-checkbox-group element. They were not before. In the view source in Chrome, the b-checkbox-group tag now contains all the b-checkbox tags. It did not before.

So it's functional, if we don't put the div tag around the b-checkbox components. Cool. Unfortunately that gives me a horizontal list and I need a vertical one.

At least I understand what's happening now and why. Once I'm less distracted, I'll see if I can figure out how to fix it.

[thc1967]

After more testing, the wrapper <p class="control"> that I put around the b-checkbox-group tag causes it to render improperly and that drives the improper behavior because the b-checkbox elements are no longer children of the b-checkbox-group.

Don't know why that happens and I don't know if you want to call it a bug or not, but I have what I need to make it work the way I want it to in my app at least.

Cheers!

[rafaberaldo]

Sorry for the delay, can you post the HTML before and after so I can try to find what's wrong?

[rafaberaldo]

I'm closing this cause I couldn't reproduce, glad that you make it work 👍