vuejs单选按钮组件

Question

我试图让这个自定义单选按钮组件在vuejs中工作.如何使用父组件中的值检查单选按钮.我知道你使用v-model并将其设置为其中一个输入值中的相同值,但它似乎无法使其工作.

零件:

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

组件模板:

<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" />

Answer 1

对于单选按钮,您需要为checked属性传递true或false以将其预设为某种状态.或者,您的值v-model应等于value单选按钮,以便检查它.

在有限的样本代码,您已经发布,相信你的标签按钮指数像1,2,3等等......我想你要选择其中一个按钮,当selectedValue比赛label是单选按钮.例如,如果selectedValue为2,则需要选中单选按钮2.

假设上述情况正确,您需要在radio-button组件模板中进行一行更改:

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

注意:

1. 您的按钮label是单选按钮的值.当您单击特定单选按钮时,这是您希望设置为selectedValue的内容.

2. 您value的子组件实际上selectedValue是父组件,它表示当前选择的单选按钮.所以这应该进入v-model

因此,根据表单输入绑定上的文档,如果v-model变量等于该单选按钮的值,将检查单选按钮.

但现在又出现了另一个问题:如果单击另一个单选按钮,则表示selectedValue父内部组件会发生变化.这不会发生,因为只props给你单向绑定.

要解决此问题,您需要从子组件(单选按钮)执行$ emit并在父组件(表单)中捕获它.

这是一个有效的jsFiddle示例:https://jsfiddle.net/mani04/3uznmk72/

在此示例中,表单模板定义了单选按钮组件,如下所示:

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

只要值在子组件内部发生变化,它就会传递一个"更改"事件以及单选按钮的标签,该标签将传递给changeValue()父表单组件的方法.父组件更改后selectedValue,单选按钮会自动更新.

希望能帮助到你!