我有一个 vue 组件,它使用额外的标记和样式扩展 native radio 输入,目的是它可以在整个应用程序中用作常规 radio 的替代品:
<div class="radios">
<radio-input name="radioInput" value="one" v-model="options.firstOption">
<radio-input name="radioInput" value="two" v-model="options.firstOption">
<radio-input name="radioInput" value="three" v-model="options.firstOption">
</div>
我一直在遵循建议的方法 here (jsfiddle here ) 但我想为组件添加接受 v-model 属性的能力,而这个例子没有这样做。
到目前为止,这是我的 .vue 组件文件:
<template>
<span class="radio-control">
<input
class="input-bool"
type="radio"
:name="name"
:value="value"
v-model="radioButtonValue">
</span>
</template>
<script>
export default {
model: {
prop: 'checked',
},
props: {
name: String,
value: String,
checked: String
},
computed: {
radioButtonValue: {
get: function() {
return this.checked;
},
set: function() {
this.$emit('input', this.value);
}
}
},
};
</script>
一切都很好,在变化、模型更新方面效果很好。问题在于组件呈现时未应用 radio 的 checked 属性,因此如果有人点击页面,所有 radio 都显示为空白,直到发生更改事件。
Vue 的文档 explicitly state “v-model
将忽略在任何表单元素上找到的初始值、已检查或已选择的属性。它将始终将 Vue 实例数据视为真实来源。”正如预期的那样,添加它并没有什么不同。但是我很难让 native checked
属性在渲染时出现单选按钮。
最佳答案
根本不是 vue.js 问题,@bertEvans 是正确的,因为我发布的代码可以正常工作。问题是我在页面的更上方有一组单独的 radio 输入,它们具有相同的 name=""
属性。伙计们,如果您的广播组没有按预期运行,请确保每个组都有一个唯一的名称!
关于javascript - 渲染时未检查 Vuejs 共享 radio 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44035627/