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错误。所以不知何故，我没有访问该属性，我不明白为什么。

什么是您回应样子？它是一个数组还是对象？你已经声明'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>

我完全明白你的意思，而且你的逻辑是正确的，但是这让我想知道在Vue.js（或axios）的上下文中如何使用计算函数来过滤部分循环输出的输出我的模板。似乎是矫枉过正循环整个事情，只是在我的模板中再次循环。 – Stephen

我不明白你为什么绝对要使用计算属性...你可以在常规方法中进行AJAX调用，并使用自定义过滤器进行日期。您也可以使用vue-moment或vue-i18n来正确处理您的日期。 ;） – Badacadabra

我正在使用vue时刻，但需要将它应用于日期：在它们到达vue-data-tables之前，或者在axios调用的数据响应之前。我可以定期循环，我的时刻过滤器工作得很好。 – Stephen

Vue.js 2 axios计算的值返回“无效日期”

相关推荐