Geek Answers Handbook

Vuejs switch component

I tried to get this custom switch component to work in vuejs. How to make the switch be marked with a value from the parent component. I know that you are using a v-model and setting the same value in one of the input values, but it doesn't seem to work.

component:

export default Vue.component('radioButton', { template, props: ['name', 'label', 'id', 'value'] })

component template:

 <label class="radio" :for="id"> <input type="radio" :id="id" class="radio-button" :value="value" :name="name"> <span class="radio-circle"> </span> <span class="radio-circle__inner"> </span> <span class="radio-button__label">{{ label }}</span> </label>

HTML:

 <radio-button name="options" id="option-1" label="1" :value="selectedValue" /> <radio-button name="options" id="option-2" label="2" :value="selectedValue" />
+3
source share
2 answers

For switches, you need to pass true or false for the checked property in order to first set it to some state. Alternatively, your value in v-model should be equal to the value switch in order for it to be checked.

In a limited example of the code you posted, I think your label is the button index, for example 1 , 2 , 3 , etc ... And I think you want to select one of the buttons when selectedValue matches the label this switch. For example, if selectedValue is 2, then you want switch 2 to be set.

Assuming the above is correct, you need to make a one-line change to your radio-button component template:

 <input type="radio" class="radio-button" :value="label" :name="name" v-model="value">

Note:

  • Your label button is the value for the switch. This is what you expect to set for selectedValue when you click on a specific radio button.

  • Your value in the child component is actually the selectedValue parent component, which indicates the radio button that is currently selected. So this should go in v-model

So, according to Form Input Bindings docs, your switch will be checked if the v-model variable is equal to the value of this switch.

But now there is another problem: if you click on another switch, you are expecting the selectedValue to change in the parent component. This will not happen because props only provides one-way binding.

To fix this problem, you need to make $ emit from your child component (radio button) and capture it in the parent component (your form).

Here is a jsFiddle working example: https://jsfiddle.net/mani04/3uznmk72/

In this example, the form template defines the components of the switches as follows:

 <radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/> <radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/>

Whenever a value changes inside a child component, it passes the "change" event along with the switch label, which is passed to the changeValue() method of the parent form component. After changing the parent component of selectedValue your radio buttons will be updated automatically.

Hope this helps!

+11
source

Personally, I would do it differently to keep the v-model directive and avoid the @change event (which can be replaced with @input if you need to perform some other logic). The fact is that the value of the v-model is equal to the value "value" in the switch component.

 props: { value: {}, v_value: {}, .... }

Therefore, all you have to do is pass the actual current value to do some checks, and $ emit value when you click on a label or when changing an input if you don't have a label.

 <label :for="id" @click="$emit('input', v_value)"> <input type="radio" :value="label" :name="name" :id="id" /> {{ label }} </label>

I also added (but commented on this) version with simple HTML markup in case you need custom switches:

 <div class="label" @click="$emit('input', v_value)"> <span>{{ label }}</span> </div>

https://jsfiddle.net/Zyfraglover/1qzmxo9a/

0
source

More articles:


All Articles