时间戳

首页 > 解决方案 > 如何在laravel中将日期时间值与翻转倒计时vue js绑定？

laravel - 如何在laravel中将日期时间值与翻转倒计时vue js绑定？

问题描述

我正在尝试将 datetime 与flip-countdown组件绑定，以便它读取日期和时间以开始显示和倒计时。

我的问题是它无法读取时间，或者日期时间未与flip-countdown组件绑定。

模板：

<template>
    <div class="container-fluid">
        <div class="row">

            <div class="col-lg-4" dir="ltr">          
                <flip-countdown v-bind:deadline="this.time|created_at" :showDays="false"></flip-countdown>
            </div>
    </div>
 </div>
</template>

剧本：

 import FlipCountdown from 'vue2-flip-countdown'
 export default {
        components: { FlipCountdown },
        name: "TimeEntry",

        data() {
            return {
                
                time: '',
               
            }
        },
  methods: {
       getTime(){
                axios.get('/api/last_time')
                    .then(({data}) => {
                        console.log(data.time);
                        // this.times = data.times.data;
                        this.time = data.time;
                    })
            }
    },
   created() {
            
            this.getTime();
            
        }

API路线：

Route::get('/last_time', function (){
    $tim = \App\TimeEntry::latest()->where('time_end', null)->first()->created_at;
    $time = \Carbon\Carbon::parse($tim)->addHour(7);

    return response()->json(['time'=>$time]);
});

筛选：

Vue.filter('created_at', function(time_end){
    return moment(time_end).format('YYYY-MM-DD HH:mm:ss')
});

我试图显示的值：this.time|created_atin <p>{{ this.time|created_at }} </p>，输出是：2020-07-23 18:58:07。

标签： laravelvue.jsvuejs2

解决方案

Vue 过滤器旨在用于字符串插值，而不是绑定。

一种解决方案是使用返回格式的计算道具：time

<template>
  <flip-countdown :deadline="formattedTime" :showDays="false"></flip-countdown>
</template>

<script>
import moment from 'moment'

export default {
  //...
  computed: {
    formattedTime() {
      return moment(this.time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

推荐阅读