vuejs 单选按钮组件

Posted 2023-02-23

【中文标题】vuejs 单选按钮组件

【英文标题】：vuejs radio button component

【发布时间】：2017-03-21 08:30:41

【问题描述】：

我试图让这个自定义单选按钮组件在 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" />

【问题讨论】：

你能用你已经完成的事情发布一个 jsfiddle 吗？

【参考方案1】：

我个人会采取另一种方式，保留 v-model 指令并避免 @change 事件（如果必须执行任何其他逻辑，可以将其替换为 @input）。这里的问题是我的 v-model 值等于单选按钮组件中的“值”道具。

props: 
    value: ,
    v_value: ,
    ....

因此，您所要做的就是传递真实的当前值以进行一些检查，并在单击标签时 $emit 值，或者如果您没有任何标签，则在输入更改时。

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

【讨论】：

这可能不适用于基于键盘的输入和辅助设备。

【参考方案2】：

对于单选按钮，您需要为选中的属性传递 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">

注意：

您的按钮label 是单选按钮的值。这是您希望在单击特定单选按钮时设置为 selectedValue 的值。

你在子组件中的value实际上是父组件的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"/>

每当子组件内的值发生变化时，它都会传递一个“更改”事件以及单选按钮的标签，该标签会传递给父表单组件的changeValue()方法。一旦父组件更改selectedValue，您的单选按钮会自动更新。

希望对你有帮助！

【讨论】：

为了减少冗长，由于 Vue.js 2.3.0，您可以在父端使用 .sync 修饰符，并使用模式update:propName 发出事件。因此，不再需要定义@change。 vuejs.org/v2/guide/components-custom-events.html#sync-Modifier