私はVUEのコンポーネントを持っているコンポーネントテンプレート

Question

を表示しようとすると、/人はそうのようなウェブサイト上のすべての人々のJSONです：

<template> 
     <div class="col-md-2 col-sm-4 col-xs-6" v-for="people in persons"> 
      <div class="c-item"> 
       <a href="" class="ci-avatar"> 
        <img src="img/demo/contacts/1.jpg" alt="" class="hoverZoomLink"> 
       </a> 

       <div class="c-info"> 
        <strong>@{{ people.name }}</strong> 
        <small></small> 
       </div> 

       <div class="c-footer"> 
        <button class="waves-effect"><i class="zmdi zmdi-person-add"></i> Add 
        </button> 
       </div> 
      </div> 
     </div> 
    </template> 


    <script> 
     export default { 

      data: function(){ 
       return { 
        persons: [] 
       } 
      }, 

      mounted: function() 
      { 
       this.getPeople(); 
      }, 

      methods: 
      { 
       getPeople: function() { 
        axios.get("/people").then(function(response) { 
         this.persons = response.data; 
        }.bind(this)); 
       } 
      } 
     } 
    </script> 

コードがExample.vueで、そして私のアプリであることを.js私は次のコードを持っている：私は、私は私のページをロードするとき、私は、次のHTML

@extends('layouts.main') 
    @section('content') 
     <div class="container"> 

      <div id="app"> 
       <all-people></all-people> 
      </div> 
     </div> 
    @stop 

を持っている私のブレードのファイルでは今

Vue.component('all-people', require('./components/Example.vue')); 


    const app = new Vue({ 
     el: '#app', 
    }); 

をMここでは、エラーを取得していませんが、テンプレートが表示ins'tはソースです：

<div class="container"> 
     <div id="app"><!----></div> 
    </div> 

私はあなたが持っている「アプリ」

Answer 1

のIDを持つdiv要素に、コンポーネントをバインドしようとしています以下のように、id = appでdiv内部all-peopleコンポーネントを使用します。

<div class="container"> 
    <div id="app"> 
     <all-people></all-people> 
    </div> 
</div> 

あなたはdocsで使用する方法の詳細を取得することができます。