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
