Vue 资源 - plugin.apply 不是函数

Question

我有一个用 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 资源，因为我在退出一些组件。我有 0.9.3 vue 资源版本，我尝试更新它，因为显然该错误已在较新版本中修复，但在更新它时出现错误：

plugin.apply is not a function

我尝试更改导入插件的方式，建议在这里：

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

到

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

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

Answer 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

Vue 资源 - plugin.apply 不是函数

Vue resources - plugin.apply is not a function

javascript

google-chrome

vue.js

vue-resource