vuejs单选按钮组件

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

组件：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" />

来源

2016-11-07 Walraz

你可以发布一个jsfiddle你已经做了什么？ – highFlyingDodo

单选按钮，你需要通过真或假的checked属性预设它到某个状态。或者，您在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模型变量等于单选按钮的值。

但现在又出现了另一个问题：如果您单击另一个单选按钮，则预计父组件中的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，您的单选按钮将自动更新。

希望它有帮助！

来源

2016-11-08 10:20:23 Mani

vuejs单选按钮组件

回答

相关问题