jdogdvr jdogdvr - 24 days ago 8
Javascript Question

Rendering Dynamic Components in vue.js?

I'm trying to render a dynamic component in vue.js by faking an ajax call by using set timeout. It should register a new component then set it in the view! I'm using vue.js 1. Please show me a solution as to how I can get this working please.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test dynamic components</title>
</head>
<body>

<div v-component="{{currentView}}"></div>


<script src="vue-v1.js"></script>
<script>
//Create the 'default' component
Vue.component("default", {
template: '<div>This should be replaced (and will be in 2 seconds)</div>'
});

//Create the parent ViewModel
var vm = new Vue({
el: "body",
data: {
currentView: "default"
}
});

//Pretend to load the data from the server
//This would actually be $.get("/url", data, function(){...});
window.setTimeout(function () {

//Create the new component using the template we received
Vue.component("BoardFeed", {
template: '<div>Template returned from server, what I really want</div><br>And directives work too:<div v-repeat="items">{{$value}}</div>',
data: function () {
return {
items: [1, 2, 3]
};
}
});

//And then change the page to that component
vm.currentView = "BoardFeed";
}, 2000);
</script>
</body>
</html>





ISSUE:

I'm using Vue.js 1 and I can't interpolate the view of my component! I don't think using the
v-component
even is used anymore

Answer

Your code works fine with Vue.js 1 when you make two small changes:

  1. Use <component :is="currentView"></component> to include the components. v-component has been removed quite some time ago in 0.12.0.

  2. Use <div v-for="value in items">{{value}}</div> to iterate over an array. v-repeat has been deprecated in 1.0.

Here's a working JSFiddle.