Vue 资源 - plugin.apply 不是函数答案

【问题标题】：Vue resources - plugin.apply is not a functionVue 资源 - plugin.apply 不是函数
【发布时间】：2018-02-03 16:13:39
【问题描述】：

我有一个使用 Vue 1 构建的分页组件，为此我从 Laravel 分页接收数据：

<template>
    <div class="row">
        <div class="col-md-8">
          <div v-if="zeroVideos">No videos found for "{{ query }}""</div>
        </div>
        <div class="col-md-8">
          <single-video v-for="video in videos" :video="video"></single-video>
        </div>
    </div>
    <div class="row justify-content-center">
        <pages v-if="meta && videos.length && showPagination" for="videos" :pagination="meta.pagination"></pages>
    </div>
</template>

<script>
    import eventHub from '../events.js'

    export default {
        props: ['query'],
        data () {
            return {
                videos: [],
                meta: null,
                showPagination: false,
                zeroVideos: false,
            }
        },
        methods: {
            getVideos (page) {
                this.$http.get('/search/videos?q=' + this.query + '&page=' + page).then((response) => {
                    this.videos = response.data.data
                    this.meta = response.data.meta
                    this.showPagination = response.data.meta.pagination.total_pages > 1
                    console.log('Videos ' + response.data.meta.pagination.total)
                    this.zeroVideos = response.data.meta.pagination.total < 1
                    eventHub.$emit('videos.counter', response.data.meta.pagination.total)
                })
            }
        },
        ready() {
            this.getVideos(1)
            eventHub.$on('videos.switched-page', this.getVideos)
        }
    }
</script>

由于某种原因，在我更新了我的 chrome 后，分页停止工作，并且我的 response.data.meta 未定义，但是在检查控制台中的网络选项卡时，我正在从后端发送数据：

data[{id: 43, uid: "15883245ef3de1",…}, {id: 44, uid: "15883245ef3de2",…},…]
meta:{pagination: {total: 8, count: 8, per_page: 20, current_page: 1, total_pages: 1, links: []}}

分页在 IE、Firefox 和 Safari 上运行良好，但在 Chrome 上更新后出现问题。经过一番调查，我意识到这是vue资源的问题，因为如果我用vanilla js做get请求，我会得到响应数据，但我想使用vue资源，因为我在quit一些中使用它成分。我有 0.9.3 vue 资源版本，我已经尝试更新它，因为显然该错误已在较新版本中修复，但在更新时出现错误：

plugin.apply 不是函数

我已尝试更改导入插件的方式，此处建议：

var VueResource = require('vue-resource');
Vue.use(VueResource);

到

Vue.use(require('vue-resource'));

但是，还是同样的错误，如何解决vue资源的这个问题？

【问题讨论】：

标签： javascript google-chrome vue.js vue-resource

【解决方案1】：

vue-resource 有一些问题，它已停止更新和维护。它的作者写了axios来代替vue-resource。因此，我建议你使用axios。

您需要通过npm 或yarn 安装axios，并将var VueResource = require('vue-resource'); Vue.use(VueResource); 替换为var axios = require('axios'); Vue.prototype.$http = axios

参考：axios

【讨论】：