vue.js - VueJS 可重用组件未更新第二个组件的数据

Question

我正在尝试在 VueJS 中创建一个组件，并且需要重用该组件。下面是我的代码。

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 : {
}

});

这是我打开可重用组件的另一个组件。

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

打开第二个组件时，仅更新第一个组件的数据属性，而不更新第二个组件。

非常感谢任何帮助。提前致谢。

Answer 1

在这里我找到了解决方案。

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

由 VueJs 创建的相同 id 的问题，我们需要传递一个动态属性，并使用它为无线电创建 id。

感谢你们。