vue.js - 如何从 Vue.js 中另一个组件的方法渲染组件

Question

我有一个包含选择器输入的表单，该表单位于弹出窗口中。现在我的选择器没有显示，因为它在主窗口加载后呈现。如何制作呈现我的选择器 (renderPositions) 的组件，从方法 showPopup() 呈现它（在弹出窗口出现后）？提前致谢。

var usersControllerApi = Vue.resource('./users_controller/all{/id}')
var positionsControllerApi = Vue.resource('./positions_controller/all{/id}')

Vue.component('users',  {
props: ['listOfUsers'],
template: '<tbody>' +
    '<tr v-for="user in listOfUsers" >' +
    '<td class="first_column">{{user.login}}</td>' +
    '<td>{{user.fullName}}</td>' +
    '<td>{{user.position.positionDescription}}</td>' +
    '<td>{{user.active ? "Да" : "Нет"}} </td>' +
    '<td>{{user.createDate}}</td>' +
    '<td>{{user.lastUpdateDate}}</td>' +
    '<td class="seven_column"><button>Изменить</button></td>' +
    '<td class="eight_column"><button>Удалить</button></td>' +
    '</tr>' +
    '</tbody>',
created: function () {
    usersControllerApi.get().then(result => result.json().then(data => data.forEach(user => {
            this.listOfUsers.push(user)
        }
    )))
}
});

Vue.component('positions', {
props: ['listOfPositions'],
template: '<select class="form_input" id="positionsselector">' +
    '<option v-for="position in listOfPositions" v-bind:value="position.positionDescription">{{position.positionDescription}}</option>' +
    '</select>',
created: function () {
    positionsControllerApi.get().then(result => result.json().then(data => data.forEach(pos => {
            this.listOfPositions.push(pos)
        }
    )))
}
});

var renderUser = new Vue({
el: '#tableBody',
template: '<users :listOfUsers="listOfUsers" />',
data: {
    listOfUsers: []
}
});


var renderPositions = new Vue({
el: '#positionsselector',
template: '<positions :listOfPositions="listOfPositions"/>',
data: {
    listOfPositions: []
}
});

var createButtonScope = new Vue({
el: '#createButtonScope',
data: {
    isPopupVisible: false,
    login_input:'',
    password_input:'',
    repassword_input:'',
    surname_input:'',
    name_input:'',

},
methods: {
    showPopup() {
        this.isPopupVisible = true;

    },
    closeModalWindow() {
        this.isPopupVisible = false;
    },
    validate() {
    }
}
})


var comp = Vue.component('add-popup', {
props: {
    header_title: '',
    button_1_name: '',
    button_2_name: ''
},
template: '            <div id="popup_window">\n' +
    '                <div class="Dialog">\n' +
    '                    <div class="Dialog_overlay">\n' +
    '                        <div class="Dialog_content">\n' +
    '                            <div class="Dialog_header">\n' +
    '                                <span class="modal_header_text">{{header_title}}</span>\n' +
    '                                <span><i class="material-icons" @click="closePopup">close</i></span>\n' +
    '                            </div>\n' +
    '                            <div class="Dialog_body">\n' +
    '                                <slot></slot>\n' +
    '                            </div>\n' +
    '                            <div class="Dialog_footer">\n' +
    '                                <div class="modal_button_1_container">\n' +
    '                                    <button class="modal_button_1" @click="validate_form">Создать</button>\n' +
    '                                </div>\n' +
    '                                <div class="modal_button_2_container">\n' +
    '                                    <button class="modal_button_2" @click="closePopup">Отмена</button>\n' +
    '                                </div>\n' +
    '                            </div>\n' +
    '                        </div>\n' +
    '                    </div>\n' +
    '                </div>\n' +
    '            </div>',
methods: {
    closePopup() {
        this.$emit('close_popup') элементу
    },
    validate_form() {
        this.$emit('validate')элементу
    }
},
data: function () {
    return {
    }
}
});

标签： vue.js