Question

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

组件：

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

组件模板：

<radio-button name="options" id="option-1" label="1" :value="selectedValue" />
<radio-button name="options" id="option-2" label="2" :value="selectedValue" />

HTML：

@media only screen and (min-width: 320px) and (max-width: 479px) {}
@media only screen and (min-width:480px) and (max-width: 767px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 992px) and (max-width: 1200px) {}
@media screen and (min-width: 1201px) {}

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

注意：

您的按钮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"/>

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

希望它有所帮助！

Answer 2

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

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

vuejs单选按钮组件

2 个答案: