コンポーネント内の動的データを宣言する、Vuejs 2

Question

私は今vue js 2で始まっています。私はこのコードをサーバーから受信します（laravel 5.3 app）。問題はユーザーを宣言しようとするときです代わりヴュー（）インスタンスに宣言の成分上のアレイ（この場合には素晴らしい作品）：

HTML：

<div id="app"> 
    <my-component> 
     <ul id="users-list"> 
      <li v-for="user in users">{{user.name}}</li> 
     </ul> 
    </my-component> 
</div> 

JS：

Vue.component('my-component', { 
    template: '#users-list', 
    data: function() { 
     return { 
      users: [] 
     } 
    }, 
    mounted: function() { 
     this.$http.get('http://127.0.0.1:8003/api/test').then((response) => { 
      console.log(response.body); 
      this.users = response.body; 
     }, function() { 
      alert('brrh'); 
     }); 
    } 
}); 
new Vue({ 
    el: '#app', 
}); 

エラーメッセージ：「キャッチされないにReferenceError ：私たちers is defined "

Answer 1

inline-templateを実行しようとしているようですが、<my-component>コールにそのディレクティブを追加してみてください。

<div id="app"> 
      <my-component inline-template> 
        <ul id="users-list"> 
          <li v-for="user in users">{{user.name}}</li> 
        </ul> 
      </my-component> 
    </div> 

また

Vue.component('my-component', { 
     data: function() { 
      return { 
       users: [] 
      } 
     }, 
     mounted: function() { 
      this.$http.get('http://127.0.0.1:8003/api/test').then((response) => { 
       console.log(response.body); 
       this.users = response.body; 
      }, function() { 
       alert('brrh'); 
      }); 
     } 
    }); 

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

jsFiddle