Java 组件 单选按钮_vuejs单选按钮组件

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

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

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

注意：

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

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

因此，根据Form Input Bindings上的文档，如果v-model变量等于该单选按钮的值，则会检查单选按钮 .

但现在这是另一个问题：如果单击另一个单选按钮，您希望父组件中的 selectedValue 更改 . 这不会发生，因为 props 只给你单向绑定 .

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

在此示例中，表单模板定义了单选按钮组件，如下所示：

只要值在子组件内部发生变化，它就会传递"change"事件以及单选按钮的标签，该标签将传递给父表单组件的 changeValue() 方法 . 父组件更改 selectedValue 后，您的单选按钮会自动更新 .

希望能帮助到你！