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>
Кроме того, почему функция рендеринга вызывается дважды?