2016-07-17 7 views
1

私はグーグルでこのエラーの解決方法を見つけましたが、私が得ている正確なメッセージのための解決策。私はまだ現代のjavaScriptには新しいので、私は簡単にしてください。これが悪い質問であれば謝ります。vue-resource.common.js:1312 Uncaught ReferenceError:モジュールが定義されていない(匿名関数)@ vue-resource.common.js:1312

私はthisビデオチュートリアルシリーズに従っており、Vue-resource.jsのAJAX機能を利用してデータベースからデータを取得しようとしています。私がページをロードしてVueリソース経由でJSONを取得すると、ビューをロードすると上記のエラーメッセージが表示されます。繰り返しますが、私はJavaScriptにとって非常に新しいので、答えが分かりやすい場合はごめんなさい。ここで

が私の見解です:

@extends('app') 

@section('content') 
    <h1>Recent Games</h1> 
<div class="container"> 
    <games></games> 

</div> 


    </ul> 
    <template id="games-template"> 
     <ul class="list-group"> 


       <li class="list-group-item" v-for="game in list"> 
        @{{ game.winner_id }} 
        <strong @click="delete(game)">X</strong> 
       </li> 

    </template> 



    <script src="https://vuejs.org/js/vue.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.common.js"></script> 
    <script src="games.js"></script> 

@endsection 

そして、ここでは私のgames.jsファイルです:再び

Vue.component('games', { 
    template: '#games-template', 


    data: function() { 
     return { 

      list: [] 
     }; 
    }, 


    created: function() { 
     this.$http.get('api/games', function() { 
      console.log(games); 
     }); 


    }, 
    methods: { 
     delete: function (game) { 
      this.list.$remove(game) 

     } 
    } 

}); 

new Vue({ 
    el: 'body' 
}); 

私はまだJavaScriptに新たなんだ、そう答えは明白である場合、私は申し訳ありませんあなたたちに。私は周りを見て、私が理解できる情報を見つけていない。 (私はまだLaracastのBrowiserifyのレッスンにはまだ行きませんでした)。前もって感謝します。

答えて

3

vue-resource.common.js共通JSモジュールへのCDNリンク。あなたは、(browserify、webpack、require.jsなどのようなものを介して)それを動作させるために、ある種のモジュールローダを用意する必要があります。

最も簡単な解決策は、代わりに通常のjavascriptにリンクすることです。このスクリプトタグを試してください:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.js"></script> 
関連する問題