Vue.js 2 axios計算的值返回「無效日期」

我是Vue.js的新手，試圖理解計算值。特別是，我從REST API返回json數據，並且該數據是一個名爲date的字段，位於unixtime（即1486231256）中。我想將該字段轉換爲人類可讀，但該應用程序返回invalid date。這裏是我的代碼：Vue.js 2 axios計算的值返回「無效日期」

<script> 
import axios from 'axios' 
import moment from 'moment' 

export default { 
    data:() => ({ 
    errors: [], 
    posts: [] 
    }), 

    // Fetches posts when the component is created. 
    created() { 
    axios.get('https://example.com/api/v1/?uid=1', { 
    }) 
    .then(response => { 
     this.posts = response.data 
    }) 
    .catch(e => { 
     this.errors.push(e) 
    }) 
    }, 
    computed: { 
    unixform() { 
     return moment(this.posts.date, 'X').format('YYYY-MM-DD') 
    } 
    } 
} 
</script>

我不認爲此刻是這裏的問題，因爲如果我改變函數的返回簡單this.posts.date或this.date，我得到的undefined錯誤。所以不知何故，我沒有訪問該屬性，我不明白爲什麼。

來源

2017-08-08 Stephen

什麼是您迴應樣子？它是一個數組還是對象？你已經聲明'posts'是一個數組。 – abhishekkannojia

帖子返回一個包含59個對象的數組。在每個對象中都有很多字段，包括'date'，但是如果我將帖子定義爲對象，則會得到完全相同的錯誤{} – Stephen

然後，'this.posts.date'是錯誤的。 'posts'是一個數組，屬性'date'在數組上不存在。你需要迭代數組'posts'來獲取單個對象，並在每個日期值上調用moment函數。 – abhishekkannojia

我不認爲此刻是這裏的問題，因爲如果我改變函數的返回簡單this.posts.date或this.date，我得到一個錯誤未定義。所以不知何故，我沒有訪問該屬性，並且我找不到原因。

的確......你的問題甚至與Vue或Axios沒有關係，而是與Vanilla JS有關。

Ajax響應爲您提供了與此類似對象的數組：

let posts = [ 
    { date: '1486231256' }, 
    { date: '1502199613' } 
];

要得到的日期，你不能簡單地做posts.date因爲posts是一個數組！正如@abhishekkannojia建議，您通過數組必須循環：

let posts = [ 
 
    { date: '1486231256' }, 
 
    { date: '1502199613' } 
 
]; 
 

 
for (const post of posts) { 
 
    console.log(moment.unix(post.date).format('YYYY-MM-DD')); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

來源

2017-08-08 13:49:23 Badacadabra

我完全明白你的意思，而且你的邏輯是正確的，但是這讓我想知道在Vue.js（或axios）的上下文中如何使用計算函數來過濾部分循環輸出的輸出我的模板。似乎是矯枉過正循環整個事情，只是在我的模板中再次循環。 – Stephen

我不明白你爲什麼絕對要使用計算屬性...你可以在常規方法中進行AJAX調用，並使用自定義過濾器進行日期。您也可以使用vue-moment或vue-i18n來正確處理您的日期。 ;） – Badacadabra

我正在使用vue時刻，但需要將它應用於日期：在它們到達vue-data-tables之前，或者在axios調用的數據響應之前。我可以定期循環，我的時刻過濾器工作得很好。 – Stephen

Vue.js 2 axios計算的值返回「無效日期」

回答

相關問題