多个动态倒计时器vue js on laravel

Question

我希望每个拍卖品都有一个倒数计时器，这些拍卖可以并且将会动态加载。

理想情况下， {{auction.total_bids}} 将是倒计时，这需要重置为我可以在点击事件中设置的值。

到目前为止，我的代码如下：

<template>
<div>
    <h1>Live Auctions</h1>
    <ul class="row">
        <li class="col-lg-4" v-for="(auction, key, index) in auctions" :key="auction.id">
            <span>{{ auction.name }} ({{ auction.id }})</span><br />
            <span ref="bitTime">{{ auction.bid_time }}</span><br />
            <span ref="totalBids">{{ auction.total_bids }}</span><br />
            <span ref="user">{{ auction.username }}</span><br />
            <button ref="newBid" @click="bidOnThis(auction.id, key)">Bid on this item</button>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    props : {
        date : {
            type: Number,
            coerce: str => Math.trunc(Date.parse(str) / 1000)
        }
    },
    data() {
        return {
            auctions: [],
            newBid: '',
            totalBids: '',
            user: []
        };
    },
    created() {
        axios.get('/auctions').then(result => {
            this.auctions = result.data
        });
        axios.get('/getuser').then(result => {
            this.user = result.data;
        });
        window.Echo.channel('auction').listen('AuctionUpdated', ({ auction, username, key }) => {
            this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
            this.$refs.user[key].innerHTML = username ;
        });
    },
    methods: {
        bidOnThis(id, key) {
            axios.post('/auctions', { id: id, key: key });
            this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
            this.$refs.user[key].innerHTML = this.user.username ;
        }
    }
};