我正在使用 Vue 组件创建下拉选择输入。这是组件的代码:
export default {
name:"dropdown",
template:`
<div class="select">
<ul>
<li><label><input type="radio" v-model="val" :value="init" disabled checked><span>{{placeholder}}</span></label></li>
<li v-for="item in list"><label><input type="radio" v-model="val" :value="item.value" /><span>{{item.name}}</span></label></li>
</ul>
</div>`,
props: {
list: { type:Array, required:true },
placeholder: { type:String, default:"Select" },
value: { required:true }
},
data:function() {
return {
val:this.value
}
},
computed:{
init:function() {
return this.list[0].value instanceof Object ? null : '';
}
},
watch:{
val:function(val) {
this.$emit('input', val);
}
}
};
然后我可以在页面中使用它:
<dropdown :list="RESOURCES" v-model="add.resource" placeholder="Select resource" class="input-x2"></dropdown>
第一个(默认)选项为 null(如果列表由对象组成,则为“”,如果由字符串组成)。当选择任何其他选项时,值会发生变化。我最终更改了父组件(示例中的 add.resource)的绑定(bind)值,将其重置为 null,但 radio 输入不会更改为第一个(默认)元素。
所以,我需要的是,当重置值时,下拉组件转到初始状态,这意味着选择了第一个(默认)单选选项。
代码一直正常工作,直到我将其放入组件中,所以我猜这是 Prop 传播的问题
最佳答案
您需要观察 props
的变化,因为 props 不是 react 性的......
watch:{
val:function(val) {
this.$emit('input', val);
},
list:function(list) {
//Add your code here!
}
}
关于javascript - 在 Vue 组件中重置单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50679842/