javascript - vue-resource.common.js :1312 Uncaught ReferenceError: module is not defined(anonymous function) @ vue-resource. common.js:1312

Question

我已经用谷歌搜索并搜索了此错误的解决方案，但我看不到与我收到的确切消息对应的解决方案。我对现代 javaScript 还是个新手，所以请对我放轻松，如果这是一个糟糕的问题，我深表歉意。

我正在关注 this视频教程系列，我正在尝试利用 Vue-resource.js 的 AJAX 功能从数据库中获取数据。当我加载我的页面以通过 Vue-resource 获取 JSON 时，我在加载 View 时收到上述错误消息。同样，我是 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 的新手，如果答案对你们来说很明显，我很抱歉。我环顾四周，没有找到我能理解的信息。 (我还没有在 Laracasts 上学习 Browiserify 类(class))。提前致谢。

Answer 1

vue-resource.common.js CDN 链接到一个 commonJS 模块。您需要有某种模块加载器才能使其正常工作(通过 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>