CODEWITHSUNDEEP
javascriptvue.js
markusand
markusand

Reputation: 325

Reset radio button in Vue component

I'm using a Vue component to create a dropdown select input. This is the component's code:

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);
        }
    }
};

Then I can use it in a page:

<dropdown :list="RESOURCES" v-model="add.resource" placeholder="Select resource" class="input-x2"></dropdown>

The first (default) option is null (if list is made of Objects, or "" if made of String). When selecting any other option, value is changed. I eventually change the binded value from the parent component (add.resource in the example) reseting it to null, but radio input does not change to the first (default) element.

So, what I need is that when reseting value, dropdown component to go to the initial state, that means the first (default) radio option selected.

Code was working properly until I placed it into a component, so I guess it's a problem with prop propagation

Upvotes: 0

Views: 3307

Answers (1)

Rafael Guillen
Rafael Guillen

Reputation: 1673

You need to watch the props changes, because props are not reactive...

watch:{
    val:function(val) {
        this.$emit('input', val);
    },
    list:function(list) {
        //Add your code here!
    }
}

Upvotes: 1

Related Questions