Vuejs отложенный компонент плохо себя ведет

Я создал загрузчик компонентов, между которыми он получает отложенный компонент, он рендерится бесконечно: вот два jsfiddles:

работает как положено

 Vue.component('create', Vue.extend({
        template: '<h1>HEADER</h1>'
    }));

Vue.component('component-loader', function (resolve) {
        var model = Vue.extend({
            props: ['name'],
            watch: {
                name: function (newValue, oldValue) {
                   alert(newValue);
                }
            },
            render: function (createElement) {
                var self = this;
                alert(self.name);
                var m = function (resolve) {
                        resolve({
                            template: '<component is="' + self.name + '"></component>'
                        });
                };

                return createElement(m);
            }
        });
        resolve(model);
    });
    
    
    var viewModel = new Vue({});

    viewModel.$mount('#app');
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>

<div id="app">
<component-loader name="create"></component-loader>
</div>

Не работает

эта скрипка будет срабатывать через каждые 5 секунд. он также не отображает компонент как первый

 Vue.component('create', Vue.extend({
        template: '<h1>HEADER</h1>'
    }));

Vue.component('component-loader', function (loaderResolve) {
        var model = Vue.extend({
            props: ['name'],
            watch: {
                name: function (newValue, oldValue) {
                   alert(newValue);
                }
            },
            render: function (createElement) {
                var self = this;
                alert(self.name);
                var m = function (resolve) {
                    setTimeout(function () {
                        resolve({
                            template: '<component is="' + self.name + '"></component>'
                        });
                    }, 5000);
                };

                return createElement(m);
            }
        });
        loaderResolve(model);
    });
    
    
    var viewModel = new Vue({});

    viewModel.$mount('#app');
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>

<div id="app">
<component-loader name="create"></component-loader>
</div>

В чем может быть проблема? загрузчик компонента создает динамический компонент и отображает его по имени...

Обновить

есть частичное решение, которое было предоставлено здесь: https://github.com/vuejs/vue/issues/7921, но не удовлетворило решение, так как предполагаемый результат - следующий https://jsfiddle.net/L90p565e/14/

 Vue.component('create', Vue.extend({
        template: '<h1>CREATE HEADER</h1>'
    }));
    
     Vue.component('edit', Vue.extend({
        template: '<h1>EDIT HEADER</h1>'
    }));

Vue.component('component-loader', function (resolve) {
        var model = Vue.extend({
            props: ['name'],
            watch: {
                name: function (newValue, oldValue) {
                   alert(newValue);
                }
            },
            render: function (createElement) {
                var self = this;
                alert(self.name);
                var m = function (resolve) {
                    
                        resolve({
                            template: '<component is="' + self.name + '"></component>'
                        });
                    
                };

                return createElement(m);
            }
        });
        resolve(model);
    });
    
    
    var viewModel = new Vue({
    data: {
    componentname: ''
    }
    });

    viewModel.$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
enter name of component (create, edit)
<input v-model="componentname" />
<component-loader :name="componentname"></component-loader>
</div>

Кроме того, почему функция рендеринга вызывается дважды?

0 ответов

Другие вопросы по тегам