mariomka / vue-checkbox-radio Goto Github PK

May be you can add change event ? Because sometimes you need do anything else.

I have two sets of radio buttons, only 1 of the sets work. The other set just don't seem to be responding when ticking their boxes but the binding of the model works somehow.

Hi, @mariomka , could you add possibility of getting checked value(radio) and checked values(checkbox) through emit on change them with event or another possible way?
Smth like here http://vuejs.org/v2/guide/forms.html#Checkbox
Thanks.

Using boolean values in radios currently yields a warning "Expected String, got Boolean".

It does work, but I think it'd be nice if the warning would be gone.

Use case: Building a switch with two radios.

<radio :value="true" v-model="doThing" checked>Do the thing</radio>
<radio :value="false" v-model="doThing">Don't do the thing</radio>

(Yes, one could do this with a checkbox that's checked/unchecked, but that's not always practical depending on the labels used or when one wants the user to make a conscious decision to click something).

I miss the @focus="$emit('focus', name)" on the input element.
So i can target the @Focus event on the custom component.

Here: https://mariomka.github.io/vue-checkbox-radio/ you are giving examples of how to style checkbox and radio components, but when I try to do that, my style is overridden by internal component style and thus does not have any effect.

How to solve or workaround this?

I have something like this:

And this code:

<radio name="deal-type" @input="changeDealType(checked)">
    {{ dealType.description }}
</radio>

Is there any way I can tell which of the radios on my radio group was checked? For all I can tell the @input emitted event only allows me to bring checked/unchecked status for this particular radio button, but I can't tell apart which one was clicked.

I put the checkbox component inside another component and i try to do a v-model on the last one but when i do, the value is always going to be the last checkbox checked even if i make my property an array.

in the other component:

<checkbox ref="checkbox" @input="updateInput()" :value="id"></checkbox>
...
updateInput () {
  let val = this.$refs.checkbox.value
  this.$emit('input', val)
}

And in my other file who calls the component:

<my-component v-model="checkboxValues.items" id="24"/>
...
checkboxValue: {
  items: []
}

Thank you for this nice component! Very simple and useful.
But during working with it, I've found some things I'd like to see later:

1. Please, add slot supporting to the '.input-box' element.
   For example, to include svg icon via 'use x-link'.
2. Sometimes we need to add a custom class name to the '.checkbox-component' element (parent tag), not only to the nested 'input'.
   Thanks again!

vue-checkbox-radio/src/components/Radio.vue

            state() {
                if (this.modelValue === undefined) {
                    return this.checked;
                }
                return this.modelValue === this.value;
            }
        },

In my project, the modelValue sometimes is INT type, and here the state() will return false :(

so, why not use '==' in the return code in state()？

When we use a plain checkbox element, we do not need to explicitly provide a value attribute. When checkbox is checked, a "on" value is sent to the server on form submit.

For this component, the value attribute must be specified, otherwise internally the component provides its <input type="checkbox"> with an empty value attribute. And therefore, when checkbox is checked, an empty value is sent to a server on form submit.

I spent a lot of time figuring out what's wrong.

I think that if no value specified for the component from outside, the component shouldn't add the value attribute to the internal <input type="checkbox"> element at all. In this case, browser will sent "on" to the server natively.