vuejs 单选按钮组件 [英] vuejs radio button component

问题描述

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

I trying to make this custom radio button component to work in vuejs. How do I make the radio button checked with a value from parent component. I know you use v-model and set it to a same value in one of the input values, but it dont seem to get it work.

组件:

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

推荐答案

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

For radio buttons, you need to pass true or false for the checked property to preset it to some state. Alternatively, your value in v-model should be equal to value of radio button so that it gets checked.

在您发布的有限示例代码中，我相信您的标签是按钮索引，例如 1、2、3 等...而且我认为您希望在 selectedValue 匹配该单选按钮的 label 时选择其中一个按钮.例如，如果 selectedValue 为 2，则您希望选中单选按钮 2.

In the limited sample code you have posted, I believe your label is the button index like 1, 2, 3 and so on... And I think you want to select one of the buttons when the selectedValue matches label of that radio button. For example, if selectedValue is 2, then you want radio button 2 to be checked.

假设以上是正确的，您需要在radio-button组件模板中进行一行更改:

Assuming the above is correct, you need to make a one line change in your radio-button component template:

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

注意:

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

1. Your button label is the value for radio button. This is what you would expect to set to selectedValue when you click a particular radio button.

你在子组件中的value实际上是父组件的selectedValue，表示当前选中的单选按钮.所以这应该进入 v-model

Your value in child component is actually selectedValue of parent component, which indicates the radio button that is currently chosen. So this should go into v-model

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

So, as per the docs on Form Input Bindings, your radio button will get checked if the v-model variable is equal to the value of that radio button.

但现在还有另一个问题:如果您单击另一个单选按钮，您希望父组件中的 selectedValue 发生变化.这不会发生，因为 props 只为您提供单向绑定.

But now here is another problem: If you click on another radio button, you expect the selectedValue in parent component to change. That is not going to happen because props gives you one-way binding only.

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

To resolve this issue, you need to do a $emit from your child component (radio button) and capture it in the parent component (your form).

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

Here is a working jsFiddle example: https://jsfiddle.net/mani04/3uznmk72/

在本例中，您的表单模板定义单选按钮组件如下:

In this example, your form template defines radio-button components as follows:

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

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

Whenever the value changes inside child component, it will pass a "change" event along with the label of radio button, which gets passed to changeValue() method of the parent form component. Once the parent component changes selectedValue, your radio buttons update automatically.

希望有帮助！

这篇关于vuejs 单选按钮组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！