VueJS reusable component not updated data for second component

Question

I am trying to create one component in VueJS and need to reuse that component. below is code for me.

Vue.component("radio" , {
props: ['selectGender'],
data: function() {
    return{
        selected: 1
    }
},
template : `
    <div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
        <div class="modal-dialog default-font" style="top: 30%;">
            <div class="modal-content center">
            <div class="modal-header base-bg center">
                <div class="center">
                    <span class="validationHeadSpan">Select Gender</span><br/>
                </div>
                <button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">&#215;</button>
            </div>
            <div class="modal-body t-left" id="printArea">                              
                <div class="container">
                    <div class="row" style="padding: 0rem 1rem;">
                        <div class="col">
                            <div class="custom-control custom-radio" style="margin: 1rem 0rem;">
                            <input class="custom-control-input" type="radio" id="rdbMale" value="0" checked v-model="selected"/>
                            <label class="custom-control-label" for="rdbMale">
                                <div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>                                               
                            </label>
                        </div>
                        </div>
                        <div class="col">
                            <div class="custom-control custom-radio" style="margin: 1rem 0rem;">
                            <input class="custom-control-input" type="radio" id="rdbFemale" value="0" checked v-model="selected"/>
                            <label class="custom-control-label" for="rdbFemale">
                                <div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>                                             
                            </label>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer center">
                <button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>                              
            </div>
            </div>
        </div>
</div>
`,
mounted : function(){
},
methods : {
}

});

Here is my another component from where i am opening reusable component.

Vue.component("Component1" , {  
    data: function() {
        return{
            selected: 1
        }
    },
    template : `
        <div>
            <radio ref="returnOpenFirst" :selectGender="selectGenderFirst"></radio>
            <radio ref="returnOpenSecond" :selectGender="selectGenderSecond"></radio>
        </div>
        <div class="btn btn-primary formButton" v-on:click="openFirst">
            <span>Open First</span>
        </div>
        <div class="btn btn-primary formButton" v-on:click="openSecond">
            <span>Open First</span>
        </div>
    `,
    mounted : function(){
    },
    methods : {
        openFirst:function(){
            jQuery(self.$refs.returnOpenFirst.$el).modal({
                'backdrop' : false
            }).modal('show');
        },
        openSecond:function(){
            jQuery(self.$refs.returnOpenSecond.$el).modal({
                'backdrop' : false
            }).modal('show');
        },
        selectGenderFirst:function(gender){
            console.log("First Gender", gender);
        },
        selectGenderSecond:function(gender){
            console.log("Second Gender", gender);
        },
    }
});

While opening second component, data property is updated of first component only not for second component.

Any help is highly appreciated. Thanks in advance.

"_data property is updated of first component only not for second component._" which data property are you referring to here? and how did you test if it is updated of the first component only and not for the second component? — palaѕн, Apr 09 '20 at 11:12
@palaѕн I am trying to access "selected" property of radio controller. However i am checking with vuedevtools. — AB Vyas, Apr 09 '20 at 11:23
Your issue is not clear to me yet. Can you create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [jsfiddle](https://jsfiddle.net/) or [snippet](https://meta.stackoverflow.com/a/356679/1823841) here to show the issue happening. — palaѕн, Apr 09 '20 at 11:37
@palaѕн Thank you for your support. but i found root-cause of issue. — AB Vyas, Apr 09 '20 at 17:46

score 0 · Accepted Answer · answered Apr 09 '20 at 11:53

Here i found solution.

Vue.component("radio" , {
    props: ['selectGender','type'],
    data: function() {
        return{
            selected: 1
        }
    },
    template : `
        <div class="modal fade" :id="compId" style="background: rgb(0, 0, 0, 0.8);">
            <div class="modal-dialog default-font" style="top: 30%;">
                <div class="modal-content center">
                <div class="modal-header base-bg center">
                    <div class="center">
                        <span class="validationHeadSpan">Select Gender</span><br/>
                    </div>
                    <button type="button" class="close modal-close" data-dismiss="modal" style="font-size:3rem">&#215;</button>
                </div>
                <div class="modal-body t-left" id="printArea">                              
                    <div class="container">
                        <div class="row" style="padding: 0rem 1rem;">
                            <div class="col">
                                <div class="custom-control custom-radio" style="margin: 1rem 0rem;">
                                <input class="custom-control-input" type="radio" :id="'rdbMale'+type" value="0" checked v-model="selected"/>
                                <label class="custom-control-label" :for="'rdbMale'+type">
                                    <div class="addr_header_1" style="margin-top: 0.8rem;">Male</div>                                               
                                </label>
                            </div>
                            </div>
                            <div class="col">
                                <div class="custom-control custom-radio" style="margin: 1rem 0rem;">
                                <input class="custom-control-input" type="radio" :id="'rdbFemale'+type" value="0" checked v-model="selected"/>
                                <label class="custom-control-label" :for="'rdbFemale'+type">
                                    <div class="addr_header_1" style="margin-top: 0.8rem;">Female</div>                                             
                                </label>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer center">
                    <button type="button" class="button" data-dismiss="modal" v-on:click="selectGender(selected)"><span class="validationButtonContent">Select</span></button>                              
                </div>
                </div>
            </div>
    </div>
    `,
    mounted : function(){
    },
    methods : {
    }
});

Issue with same id created by VueJs, we need to pass one dynamic property and with the use of that we need to create id for radio.

Thank you guys.

VueJS reusable component not updated data for second component

1 Answers1