vue.js 2.0 laravel 5.3で動的にコンポーネントをロードする

Question

vuejs 2.0およびlaravel 5.3のリスト項目をクリックすると、コンポーネントを動的にロードできますか？私は標準のLaravelアプリケーションを持っていますが、サイトの1つのセクション（レポートを表示する）に、このページをvuejsを使用して単一のページアプリケーションにしたいと考えています。私は、VUEのコンポーネントを使用して、デフォルトのレポートをロードし、そのようにすべてが、うまく機能：リチウム項目のいずれかがクリックされたとき

 <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> 

は私は何を達成しようとしていること<reports-homepage></reports-homepage>が李それによれば、動的に変更されますが押された。たとえば、<reports-daily></reports-daily>になる可能性があります。

Iは、Liコンポーネントに@clickを入れて、それは私に次のエラー与えるが、刃部で以下のスクリプトでいることをキャッチしようとしました：

[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

をofficial documentation使用できるで指摘したように動的コンポーネント。

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; 
    } 
    } 
}) 

そして、それはあなたが達成しようとしている何をすべき：あなたのケースでは、このようなものを見ることができます。それが助けられたら教えてください！