英文:
How do you sort a relational, unordered table by creation date in vue?
问题
以下是您要翻译的内容:
"I have a set of SQL data that I fetch with axios and output on the frontend using Vue. This is what the data looks like:
Problem is that the data is not sorted in the database. It's a relational table, so it does not have inherit oredering, but I need to display the last entered "regulationTakesEffectDate". However, as you can see I have a column called creationDateTime which is when the regulation date was created, so my idea was that maybe it would be possible to sort the array based on that, so that Vue outputs the LATEST entry in the table based on the creation date.
But I am not exactly sure how to do this.
Here is how the code looks so far.
{{ tenancyUnit.regulationDate[tenancyUnit.regulationDate.length - 1].regulationTakesEffectDate }}
So, I am already telling the application to get the last item in the array, but as I already pointed out, the database does not show the data in the correct order (from when it was created), so currently the last item in the array is completely random.
In my computed properties I tried to work out a solution. I tried:
sortedItems() {
return this.tenancyUnits.regulationDate.creationDateTime.sort((a, b) => new Date(a.date) - new Date(b.date))
}
This does not work. I just get an error returned saying that regulationDate is an unresolved variable
Any ideas on how to do this?
英文:
I have a set of SQL data that I fetch with axios and output on the frontend using Vue. This is what the data looks like:
Problem is that the data is not sorted in the database. It's a relational table, so it does not have inherit oredering, but I need to display the last entered "regulationTakesEffectDate". However, as you can see I have a column called creationDateTime which is when the regulation date was created, so my idea was that maybe it would be possible to sort the array based on that, so that Vue outputs the LATEST entry in the table based on the creation date.
But I am not exactly sure how to do this.
Here is how the code looks so far.
<div v-for="tenancyUnit in tenancyUnits">
<i class="fas fa-calendar fa-fw fa-lg icon-class ml-2 mr-2"></i>
<strong class="ml-2"> {{ tenancyUnit.regulationDate[tenancyUnit.regulationDate.length - 1].regulationTakesEffectDate }}</strong>
</li>
</div>
So, I am already telling the application to get the last item in the array, but as I already pointed out, the database does not show the data in the correct order (from when it was created), so currently the last item in the array is completely random.
In my computed properties I tried to work out a solution. I tried:
sortedItems() {
return this.tenancyUnits.regulationDate.creationDateTime.sort((a, b) => new Date(a.date) - new Date(b.date))
}
This does not work. I just get an error returned saying that regulationDate is an unresolved variable
Any ideas on how to do this?
答案1
得分: 1
你好,我也许找到了一个解决方案。
对于你的已排序数组,你需要根据 tenancyUnits
进行排序,因为它是一个数组,而不是你在示例中使用的对象。
sortedItems() {
return this.tenancyUnits.sort((a, b) => {
const [lastIndexA, lastIndexB] = [a.regulationDate.length - 1, b.regulationDate.length - 1]
return new Date(a.regulationDate[lastIndexA].creationDateTime) - new Date(b.regulationDate[lastIndexB].creationDateTime)
})
}
希望这个解决方案对你有帮助。🧕🏼
英文:
Hi i maybe found a solution.
For your sorted array, you need to sort on tenancyUnits because it's an array and not an object as you used in your example.
sortedItems() {
return this.tenancyUnits.sort((a,b) => {
const [lastIndexA, lastIndexB] = [a.regulationDate.length - 1, b.regulationDate.length - 1]
return new Date(a.regulationDate[lastIndexA].creationDateTime) - new Date(b.regulationDate[lastIndexB].creationDateTime)
})
}
Hope this solution will help you 🧙♂️.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论