onClick（）は、時間、Reactive、Vue.js、およびFirebase DBを表示します。

Question

長時間のブラウザ、初めての質問者です。

インボードとアウトボードの場合、従業員はVue.js v-onをクリックして「アウトボタン」をクリックする必要があります。その横にある「（午後3時55分）」を表示したい

<button class="btn btn-smaller btn-out" v-show="user.in" v-on:click="updateOut(user)">out</button>

順番にこのようFirebase DBにusersRefタイムアウトステータスを更新 - - 実際の日付スタンプでこれを更新

updateOut: function (user) {usersRef.child(user['.key']).child('in').set(false) 
     usersRef.child(user['.key']).child('timeOut').set(Date()) 
    }, 

-

ここ

ボタンです

{{ user.timeOut }} 

問題I私はupdateOut関数の中でこれをフォーマットすることはできません。単に「午後3時55分」と表示するだけです。私はそれを表示することができます "Wed Mar 29 2017 10:55:02 GMT-0600（MDT）"

Srinivas - 私はこれを動作させることはできません。私はこれを試しました -

methods: { 
    addUser: function() { 
     if (this.newUserName) { 
     usersRef.push({ 
      name: this.newUserName, 
      in: false, 
      returnTime: '' 

     }) 
     this.newUserName = '' 
     }, 
    }, 
    getTime: function(user) { 
     const outTime = new Date(this.user.timeOut) 
     const hours = outTime.getHours() 
     let minutes = outTime.getMinutes() 
     if (minutes < 10) minutes = "0" + minutes // prepend 0 
     return (hours + ":" + minutes) 
    }, 
    updateReturnTime: function (user, newText) { 
     usersRef.child(user['.key']).child('returnTime').set(newText) 
    }, 
    updateIn: function (user) { 
     usersRef.child(user['.key']).child('in').set(true) 
     usersRef.child(user['.key']).child('timeOut').set('') 
    }, 
    updateOut: function (user) { 
     usersRef.child(user['.key']).child('in').set(false) 
     usersRef.child(user['.key']).child('timeOut').set(Date.now()) 
    }, 

Answer 1

日付を必要な形式に変換する方法を作成できます。

methods: { 
getTime() { 
    const outTime = new Date(this.user.timeOut) 
    const hours = outTime.getHours() 
    let minutes = outTime.getMinutes() 
    if (minutes < 10) minutes = "0" + minutes // prepend 0 
    return (hours + ":" + minutes) 
} 
} 

この方法を複数の場所で使用している場合は、フィルタを作成できます。

Vue.filter('getTime', function(date) { 
    const outTime = new Date(date) 
    const hours = outTime.getHours() 
    let minutes = outTime.getMinutes() 
    if (minutes < 10) minutes = "0" + minutes // prepend 0 
    return (hours + ":" + minutes) 
}) 

You can use it template like this. 

{{ user.timeOut | getTime }}