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. Your button label是单选按钮的值。
2. Your value in子组件实际上是父组件的selectedValue，它表示当前选择的单选按钮。所以这应该放到v-model

中

因此，根据Form Input Bindings上的文档，如果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"/>

只要子组件中的值发生更改，它就会传递一个带有单选按钮标签的"change“事件，该事件将传递给父form组件的changeValue()方法。一旦父组件更改了selectedValue，您的单选按钮就会自动更新。

希望它能帮上忙！

Answer 2

我个人会用另一种方式，保留一个v-model指令，并避免@change事件(如果需要执行任何其他逻辑，可以用@input代替)。这里的问题是，v-model的值等于单选按钮组件中的" value“属性。

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

因此，您所要做的就是传递实际的当前值以进行一些检查，并在单击标签时更改该值，或者在没有任何标签的情况下更改输入上的值。

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

我还添加(但注释)了一个带有简单html标记的版本，以防您想要自定义外观的单选按钮：

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

https://jsfiddle.net/Zyfraglover/ndcp8t6e/