2016-11-14 1 views
0

Ich versuche, eine dynamische Komponente in vue.js zu rendern, indem ich einen Ajax-Aufruf mit dem Set-Timeout vortäuscht. Es sollte eine neue Komponente registrieren und dann in der Ansicht setzen! Ich benutze vue.js 1. Bitte zeigen Sie mir eine Lösung, wie ich das bitte machen kann.Rendern von dynamischen Komponenten in vue.js?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>test dynamic components</title> 
 
</head> 
 
<body> 
 
\t 
 
\t <div v-component="{{currentView}}"></div> 
 

 

 
\t <script src="vue-v1.js"></script> 
 
\t <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); 
 
\t </script> 
 
</body> 
 
</html>

PROBLEM:

Ich verwende Vue.js 1 und ich kann den Blick auf meine Komponente nicht einschalten! Ich glaube nicht, das v-component mit selbst verwendet wird, mehr

Antwort

1

Ihr Code funktioniert gut mit Vue.js 1, wenn Sie zwei kleine Änderungen vornehmen:

  1. Verwenden <component :is="currentView"></component>, um die Komponenten zu umfassen. v-component wurde vor einiger Zeit in 0.12.0 entfernt.

  2. Verwenden Sie <div v-for="value in items">{{value}}</div>, um über ein Array zu iterieren. v-repeat wurde in 1.0 eingestellt.

Hier ist eine funktionierende JSFiddle.

Verwandte Themen