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

[thc1967]

Overview of the problem

Buefy version: [^0.3.0]
Vuejs version: [^2.1.10]
OS/Browser: Windows, Chrome

Description

HTML:

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

script:

    var vm = new Vue({
        el: '#app',

        data() {
            return {
                clients: []
            }
        },

        methods: {
            groupChange() {
                console.log('impl.groupChange()');
            },
            checkChange() {
                console.log('impl.checkChange()');
            }
        }
    });

Steps to reproduce

1. Load the page
2. Use Chrome's Inspect tool
3. Switch to the Vue inspection tool
4. Notice that we have one BCheckboxGroup and 4 BCheckbox under Root. All 5 Buefy components are at the same level.
5. Switch to Chrome's Console viewer
6. Check the first checkbox
7. Notice that "impl.checkChange()" was logged but "impl.groupChange()" was not
8. Switch back to the Vue inspection tool
9. Notice that the BCheckbox object checked has data.newValue=true but props.checked=false
10. Notice that the BCheckboxGroup object still has an empty props.value and data.checkedList array
11. Notice that the Root client array is still empty

Expected behavior

I expected the BCheckboxGroup's event to emit and its array values to change when I checked a checkbox inside the group. I expected the client array to have a value in it.

I suspect that this is my error, but the documentation seems to lack detail for this particular control (and others).

Actual behavior

See repro steps above.

[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?

[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]

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