如何在Vue中按创建日期对关系型无序表进行排序?

huangapple go评论59阅读模式
英文:

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:

如何在Vue中按创建日期对关系型无序表进行排序?

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:

如何在Vue中按创建日期对关系型无序表进行排序?

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 🧙‍♂️.

huangapple
  • 本文由 发表于 2023年2月8日 16:38:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75383128.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定