Vue JS Sort Date with components using Computed Property

Question

I tried to sort the date using computed properties but it didnt work, if i using at methods and remove the slice, then it will sort as expected. I've tried to split the date also but still not working. I am not sure what caused the problem.

Kindly find my code as below.

App

<template>
    <div>
        <h2>Ingredients</h2>
        <ul>
            <li></li>
        </ul>
        <ingredients-list  v-for="(ingredient,index) in ingredients"
            :key="index"
            :index='index'
            :foodName="ingredient.food"
            :foodExpiry="ingredient.expiryDate">
        </ingredients-list>
    </div>
</template>
    
<script>
    export default {
        data(){
            return{
                ingredients:[
                {
                    food:'carrot',
                    expiryDate:'2020-12-12'
                },
                {
                    food:'papaya',
                    expiryDate:'2018-1-15'
                },
                {
                    food:'orange',
                    expiryDate:'2021-10-13'
                },
                {
                    food:'meat',
                    expiryDate:'2019-4-23'
                }]
            }
        },
        computed: {
            sortedItems() {
                return this.ingredients.slice().sort( ( a, b) => {
                    return new Date(a.expiryDate)- new Date(b.expiryDate);
                });
            }
        }
    }
</script>

components

<template>
    <div>
        <h2>{{index}}</h2>
        <h2>Food:{{foodName}}</h2>
        <h2>Expiry:{{foodExpiry}}</h2>
    </div>
</template>
    
<script>
    export default {
        props:['foodName','foodExpiry'],
    }
</script>

Hi Abdelillah, i want it to be autosorted whenever the page update — dragkin
– dragkin, Commented Dec 28, 2020 at 19:58

Abdelillah Aissani · Accepted Answer · 2020-12-28 20:37:34Z

2

Like @Anatoly said

Computed props are never calculated if they are not used at all.

What you should be doing to solve the problem is :

Using slice method instead of splice since it mutates the original array:

sortedItems() {
      return this.ingredients.slice()
             .sort((a, b) => new Date(a.expiryDate)- new Date(b.expiryDate));
}

Loop through the computed property and not the original array:

<ingredients-list  v-for="(ingredient,index) in sortedItems"
            :key="index"
            :index='index'
            :foodName="ingredient.food"
            :foodExpiry="ingredient.expiryDate">
</ingredients-list>

answered Dec 28, 2020 at 20:37

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anatoly · Accepted Answer · 2020-12-28 19:44:09Z

1

It seems you confused splice with slice. You need slice to get a copy of an array and to sort this copy:

 sortedItems() {
            return this.ingredients.slice().sort( ( a, b) => {
                
                return new Date(a.expiryDate)- new Date(b.expiryDate);
            });
        }

answered Dec 28, 2020 at 19:44

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

2 Comments

dragkin Over a year ago

Hi, I've tried with slice but still unable to sort

Anatoly Over a year ago

Computed props are never calculated if they are not used at all.

Collectives™ on Stack Overflow

Vue JS Sort Date with components using Computed Property

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related