Question

我收到此错误'TypeError：“ t.route不是函数””

这只是在我使用“ npm run production”将Vue投入生产后才开始-我尝试使用“ npm run dev”切换回dev并将文件上传到服务器，但是仍然存在相同的错误。

该网站的主页（拍卖页）运行的是带有Vue 2的Laravel 5.6

有关下图中错误的更多信息：

如果有人有任何想法或建议，那就太好了！

如果需要，我可以提供更多代码，只是不确定要显示什么

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('TimeLeft', require('./components/TimeLeft.vue'));
Vue.component('auction-list', require('./components/Auctions.vue'));

Vue.filter('colonCheck', function(value) {
    if (typeof value != 'number') {
        return value;
    }
});
Vue.filter('currencyCustom', function(value) {
    if (typeof value == 'number') {
        return value / 100;
    }
});

const app = new Vue({
    el: '#app'
});

bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Echo from 'laravel-echo';
import Es6Promise from 'es6-promise';
Es6Promise.polyfill()


window.Pusher = require('pusher-js');



window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'a8280ab93b40f323f448',
    cluster: 'eu',
    encrypted: true,
    disableStats: true
});

window.Echo.channel('auction').listen('AuctionUpdated', e => {
    //console.log(e);
});
window.Echo.channel('auctions').listen('AuctionRefreshed', e => {
    //console.log('All auctions updated');
    //console.log(e);
});

由于这仅在拍卖页面上发生，因此我包含了Auctions.vue

<template>
    <div class="container">
        {{ route('dashboard') }}
        {{ auction.bid_time }}
        <div class="row justify-content-center">
            <h1>Live Auctions {{ unixTime }}</h1><br />
            <button @click="setAuction()">set auctions</button>
            <button @click="resetAuction()">reset time</button> -
            <button @click="tempSetAuction()">quick set auctions</button>
            <button @click="tempClearAuction()">CLEAR ALL</button>
            <div style="clear:both;"></div>
            <br /><br />

            <div class="card col-md-12 pr-0 pl-0">
                <div class="card-body">
                    <div class="product-list-wraper">
                        <div class="row">

                            <div class="col-lg-4 col-sm-6 col-xs-12 justify-content-center" v-for="(auction, key, index) in auctions" :key="auction.id">
                                <div class="product-item">
                                    <div><span>{{ auction.name }}</span><br /></div>
                                    <div class="product-image">
                                        <img :src="auction.image" class="img-fluid" :alt="auction.name">
                                    </div>
                                    <div class="bid-end"><span class="end-time" ref="endTime">{{ auction.endtime }}</span><br /></div>
                                    <div class="bid-seconds"><span ref="bidTimeSeconds">{{ auction.time_left }}</span><br /></div>
                                    <div class="lastbidder"><TimeLeft ref="user">{{ auction.username }}</TimeLeft><br /></div>
                                    <div class="timeremaining">
                                        <TimeLeft class="bid-time" ref="bidTime">{{ bidTimeArray[key] | colonCheck }}</TimeLeft>
                                    </div>
                                    <span ref="totalBids">{{ currencySymbol }} {{ auction.total_bids / 100 }}</span><br /><!--  / 100 | currency -->
                                    <div ref="newBid" class="button">
                                        <button @click="bidOnThis(auction.id, key)">Bid on this item</button>
                                    </div>
                                    <hr />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import TimeLeft from './TimeLeft.vue';
    export default {

        //  Probably remove this
        props : {
            items: []
        },

        data() {
            return {
                //  some of these are unused, will tidy this up later
                currencySymbol: '£',
                auctions: [],
                user: [],
                bidTimeArray: [],
                totalBids: [],
                auctionImages: [],
                unixTime: '',
                timeToUpdate: '0',
                textEnded: 'Ended',
                show: true,
                userBids: 0,
                sizeNormal: '14px',
                sizeLarge: '24px'
            };
        },

        created() {
            axios.get('/timenow').then(result => {
                this.unixTime = result.data;
            });
            this.getAuctions();
            axios.get('/getuser').then(result => {
                this.user = result.data;
            });
            window.Echo.channel('auction').listen('AuctionUpdated', ({ auction, username, seconds }) => {
                for (let i = 0; i < this.auctions.length; i++){
                    if(this.auctions[i].id == auction){
                        this.alertTextUser(i).alert();
                    }
                }
            });
            window.Echo.channel('auctions').listen('AuctionRefreshed', ({ auctions }) => {
                this.getAuctions();
            });
        },
        methods: {
            alertText(key) {
                this.$refs.bidTime[key].alertColour();
            },
            alertTextUser(key) {
                this.$refs.user[key].alert();
            },

            _padNumber(n) {
                return (n < 10) ? ("0" + n) : n;
            },
            getAuctions(){
                axios.get('/auctions').then(result => {
                    //  Set up the remaining seconds for each auction on load
                    this.auctions = result.data;
                    for (let i = 0; i < this.auctions.length; i++){
                        var newTime = parseInt(this.auctions[i].time_left);
                        this.totalBids[i] = this.auctions[i].total_bids;
                        if(this.auctions[i].image === null){
                            this.auctions[i].image = '/product-categories/April2018/pbZWoztXWg08EygQuKuT.png';
                        }
                        this.bidTimeArray[i] = this._readableTimeFromSeconds(newTime).minutes+ ':'+this._readableTimeFromSeconds(newTime).seconds;
                        this.bidTimeArray[i] = this.auctions[i].bid_time -1;
                        if(this.auctions[i].endtime <= this.unixTime){
                            this.auctions[i].time_left = this.auctions[i].endtime - this.unixTime;
                        } else {
                            this.auctions[i].time_left = this.auctions[i].endtime - this.unixTime;
                        }
                    }
                });
            },
            _readableTimeFromSeconds: function(seconds) {
                const hours = 3600 > seconds ? 0 : parseInt(seconds / 3600, 10);
                return {
                    hours: this._padNumber(hours),
                    seconds: this._padNumber(seconds % 60),
                    minutes: this._padNumber(parseInt(seconds / 60, 10) % 60),
                }
            },

            bidOnThis(id, key) {
                if(this.auctions[key].time_left >= 0){
                    document.getElementById("userbids").innerHTML = document.getElementById("userbids").innerHTML-1;
                    this.auctions[key].total_bids = +this.auctions[key].total_bids + +'1'
                    var seconds = this.auctions[key].bid_time;
                    this.auctions[key].endtime = +this.bidTimeArray[key] + +this.unixTime;
                    this.auctions[key].username = this.user.username ;
                    axios.post('/auctions', { id: id, key: key, seconds: seconds });
                }
            },
            countDown(){
                this.unixTime = this.unixTime+1;
                this.timeToUpdate = this.timeToUpdate+1;
                if(this.timeToUpdate >= 60){
                    this.timeToUpdate = 0;
                    axios.get('/timenow').then(result => {
                        this.unixTime = result.data;
                    });
                }
                if(this.auctions.length >0){
                    for (let i = 0; i < this.auctions.length; i++){
                        if(typeof this.auctions[i].time_left == 'number' && this.auctions[i].time_left != '' && this.auctions[i].endtime >= this.unixTime){
                            if(this.auctions[i].time_left <= 10){
                                this.alertText(i);
                            } else {
                                this.$refs.bidTime[i].alertReset();
                            }
                            this.auctions[i].time_left = this.auctions[i].endtime - this.unixTime;
                            var newTime = parseInt(this.auctions[i].time_left);
                            this.bidTimeArray[i] = this._readableTimeFromSeconds(newTime).minutes+ ':'+this._readableTimeFromSeconds(newTime).seconds;
                            } else {
                        }
                    }
                }
            },
            tempSetAuction(){
                axios.get('/auctions/quickset').then(result => {
                });
            },
            tempClearAuction(){
                axios.get('/auctions/clear').then(result => {
                });
            },
            setAuction(){
                axios.get('/auctions/set').then(result => {
                });
            },
            resetAuction(){
                axios.get('/auctions/reset').then(result => {
                });
            }
        },
        mounted: function () {
            window.setInterval(() => {
                this.countDown();
            },1000);
        }
    };
</script>

TypeError：“ t.route不是函数”

0 个答案: