CODEWITHSUNDEEP
javascriptvue-componentvue.js
jdogdvr
jdogdvr

Reputation: 369

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

Upvotes: 1

Views: 1258

Answers (1)

Aletheios
Aletheios

Reputation: 4020

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.

Upvotes: 2

Related Questions