如何通过单击标签来绑定 vue.js 中单选按钮的值？

Question

有没有办法点击单选输入的标签输出值？

我在 vue.js 中使用 v-model 并且我隐藏了我的单选按钮 (input[type="radio"]{display: none;) 我正在尝试使用按钮的值，但是当点击标签代替。这不起作用

JSFiddle：https://jsfiddle.net/9t41L6my/3/

Answer 1

单选按钮必须具有相同的 name，以便它们被视为一个单选按钮组。另外，<label>.for应该是指对应的<input>的id，这样点击标签就会自动select输入。

您的模板应如下所示：

<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

Answer 2

为所有输入赋予相同的名称

name="same"

给输入一个 id 与标签的 for

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

您还想删除 @click="checked"

并且您想为每个定义值，而不是绑定它们

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>

如何通过单击标签来绑定 vue.js 中单选按钮的值？

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

css

radio-button

vue.js