vuejs单选按钮组件-Java 学习之路

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

2 回答

0
对于单选按钮，您需要为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 后，您的单选按钮会自动更新 .

希望能帮助到你！
回复于 2024-04-30T11:55:28+08:00
12
我个人会这样做，保持一个v-model指令并避免@change事件（如果必须执行任何其他逻辑，可以用@input替换） . 这里的事情是我的v模型值等于单选按钮组件中的“值”道具 .
```
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/1qzmxo9a/
回复于 2024-04-30T11:55:28+08:00

vuejs单选按钮组件

2 回答

相关问题