[Vuejs]-VueJS reusable component not updated data for second component

by

0👍

✅

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.

Leave a comment