[Vuejs]-How can I bind the value of a radio button in vue.js by clicking on it's label?

by

0👍

✅

The radio buttons must have the same name so that they’re treated as a single radio group. Also, <label>.for should refer to the id of the corresponding <input>, so that clicking the label would automatically select the input.

Your template should look like this:

<div class="timeline__radio">
  <input id="daily" class="timeline__input" type="radio" name="timeline" value="daily" v-model="checked">
  <label for="daily" class="timeline__label">Daily</label>
</div>
<div class="timeline__radio">
  <input id="weekly" class="timeline__input" type="radio" name="timeline" value="weekly" v-model="checked">
  <label for="weekly" class="timeline__label">Weekly</label>
</div>
<div class="timeline__radio">
  <input id="monthly" class="timeline__input" type="radio" name="timeline" value="monthly" v-model="checked">
  <label for="monthly" class="timeline__label">Monthly</label>
</div>
<div class="timeline__radio">
  <input id="yearly" class="timeline__input" type="radio" name="timeline" value="yearly" v-model="checked">
  <label for="yearly" class="timeline__label">Yearly</label>
</div>

demo

0👍

Give all inputs the same name

name="same"

Give the inputs an id the same as the labels’ for

<input id="daily" value="daily" v-model="checked" />
<label for="daily">Label</label>

You also want to remove @click="checked"

And you want to define the value for each, not bind them

value="daily"  // NOT :value="daily"

Here is an example

<input id="daily" type="radio" name="same" value="daily" v-model="checked">
<label for="daily">Daily</label>

<input id="weekly" type="radio" name="same" value="weekly" v-model="checked">
<label for="weekly">Weekly</label>

<input id="monthly" type="radio" name="same" value="monthly" v-model="checked">
<label for="monthly">Monthly</label>

<input id="yearly" type="radio" name="same" value="yearly" v-model="checked">
<label for="yearly">Yearly</label>

Leave a comment