vue.js 2.0 Lastkomponente dynamisch in Laravel 5.3

Question

Ist es möglich, eine Komponente dynamisch zu laden, wenn Sie auf ein Listenelement in vuejs 2.0 und laravel 5.3 klicken? Ich habe eine Standard-App von Laravel, aber auf einem Abschnitt der Website (Berichte anzeigen) möchte ich diese Seite in eine einzelne Seite Anwendung mit Vuejs verwandeln. Ich lade den Standardbericht eine vue Komponente bei der Verwendung und alles funktioniert gut, etwa so:

 <div class="col-md-3 col-sm-6"> 
      <div class="card-box"> 
       <h2>Reports</h2><br> 
       <ul> 
        <li>Daily</li> 
        <li>Weekly</li> 
        <li>Season</li> 
        <li>Label</li> 
        <li></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-9 col-sm-6"> 
      <div class="card-box main"> 
       <reports-homepage></reports-homepage> 
      </div> 
     </div> 

Was ich versuche zu erreichen ist, wenn einer der li Elemente geklickt wird die <reports-homepage></reports-homepage> geändert werden dynamisch nach dem li wird gedrückt. So könnte es zum Beispiel <reports-daily></reports-daily> werden.

Ich habe versucht, eine @Klicken auf dem li Komponente setzen und zu kontrollieren, dass unten in der Klingenabschnitt in einem Skript, aber das mir die folgende Störung gibt:

[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>. 

Answer 1

Wie in der darauf official documentation Sie verwenden können, dynamische Komponenten. In Ihrem Fall könnte es etwa so aussehen:

HTML

<div id="app"> 
    <div class="col-md-3 col-sm-6"> 
     <div class="card-box"> 
      <h2>Reports</h2><br> 
      <ul> 
       <li @click="setComponent('daily')">Daily</li> 
       <li @click="setComponent('weekly')">Weekly</li> 
       <li @click="setComponent('season')">Season</li> 
       <li @click="setComponent('label')">Label</li> 
      </ul> 
     </div> 
    </div> 
    <div class="col-md-9 col-sm-6"> 
     <div class="card-box main"> 
      <component v-bind:is="currentComponent"></component> 
     </div> 
    </div> 
</div> 

JS

var vm = new Vue({ 
    el: '#app', 
    data: { 
    currentComponent: 'daily' 
    }, 
    components: { 
    'daily': { /* component object */ }, 
    'weekly': { /* component object */ }, 
    'season': { /* component object */ }, 
    'label': { /* component object */ } 
    }, 
    methods: { 
    setComponent: function (component) { 
     this.currentComponent = component; 
    } 
    } 
}) 

Und das sollte tun, was Sie zu erreichen versuchen. Lass es mich wissen, wenn es geholfen hat!