我正在使用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(如果列表由Objects组成,或者“”,如果由String组成)。选择任何其他选项时,值会更改。我最终从父组件(示例中的add.resource)更改绑定值,将其重置为null,但无线电输入不会更改为第一个(默认)元素。
所以,我需要的是,当重置值时,下拉组件进入初始状态,这意味着选择了第一个(默认)无线电选项。
代码工作正常,直到我把它放入一个组件,所以我猜这是一个支持传播的问题
答案 0 :(得分:1)
您需要观看CustomSingleChildLayout
更改,因为道具不是反应性的......
props