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资源版本，我试图更新它，因为显然这个bug在新版本中得到修复，但在更新它时我得到了错误：

plugin.apply不是函数

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

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

到

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

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

Answer 1

vue-resource有一些问题，已停止更新和维护。其作者已撰写axios以替换vue-resource。因此，我建议您使用axios。

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

参考：axios

Vue资源 - plugin.apply不是一个函数

1 个答案: