I have implemented a Vue component for creating a dropdown select input. Below is the code for the component:
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);
}
}
};
Afterward, I used it on a page like this:
<dropdown :list="RESOURCES" v-model="add.resource" placeholder="Select resource" class="input-x2"></dropdown>
The issue I am facing is that when I reset the value to null, the dropdown component does not revert to the first (default) option as expected.
It was functioning correctly before I placed it into a component, leading me to believe there may be an issue with prop propagation.