vue.js dynamic create nest modal

    
    


    

        
{{txt}}
        show modal
    

    

    
    

    
        'use strict'

        function creat_new_modal(txt, deep) {

            var promise = new Promise(function (resolve, reject) {

                var MyModal = Vue.extend({});

                var modal = new MyModal({
                    ready: function () {
                        this.$watch('show', function (val) {
                            if (val === false) {
                                modal.$destroy(true)
                            }
                        })
                    },
                    data: {
                        show: true,
                        txt: txt,
                        deep: deep || 0,
                    },
                    template: '#template',
                    methods: {
                        showNew: function () {
                            var self = this

                            creat_new_modal(this.txt, this.deep + 1).then(function (value) {
                                self.txt = value
                            }, function (error) {
                                console.log(error)
                            })
                        },
                        submit: function () {
                            resolve(this.txt)
                            this.show = false
                        },
                        cancel: function () {
                            reject('cancel')
                            this.show = false
                        }
                    },
                    components: {
                        modal: VueStrap.modal
                    }
                })

                modal.$mount().$appendTo('body')
            })
            return promise
        }

        var vm = new Vue({
            el: '#demo',
            data: function () {
                return {
                    txt: null,
                }
            },
            methods: {
                show: function () {
                    var self = this

                    creat_new_modal(self.txt).then(function (value) {
                        self.txt = value
                    }, function (error) {
                        console.log(error)
                    })
                }
            }
        })
    

    
    


    

        
{{ txt }}
        show modal
    

    

    

    
        'use strict'

        function creat_new_modal(txt, deep) {

            var promise = new Promise(function (resolve, reject) {

                var MyModal = Vue.extend({})

                var modal = new MyModal({
                    data: {
                        show: true,
                        txt: txt,
                        deep: deep || 0,
                    },
                    template: '#template',
                    methods: {
                        showNew: function () {
                            var self = this

                            creat_new_modal(this.txt, this.deep + 1).then(function (value) {
                                self.txt = value
                            }, function (error) {
                                console.log(error)
                            })
                        },
                        submit: function () {
                            resolve(this.txt)
                            this.show = false
                        },
                        cancel: function () {
                            reject('cancel')
                            this.show = false
                        }
                    },
                    watch: {
                        'show': function (val) {
                            if (val === false) {
                                this.$destroy()
                                document.getElementById('demo').removeChild(this.$el)
                            }
                        }
                    }
                })

                //  ， 
                var component = modal.$mount()
                document.getElementById('demo').appendChild(component.$el)
            })
            return promise
        }

        var vm = new Vue({
            el: '#demo',
            data: function () {
                return {
                    txt: null,
                }
            },
            methods: {
                show: function () {
                    var self = this

                    creat_new_modal(self.txt).then(function (value) {
                        self.txt = value
                    }, function (error) {
                        console.log(error)
                    })
                }
            }
        })