simple js sort in vue 3 / nuxt 3-CodePudding

I have a property called slug: 1 for each object. I want to print them in the numeric order of the slug property, I tried using .sort((a,b) => a-b) on the v-for="(link ) in blog.children.sort((a,b) => a-b)"

But could not make it work it will still print like this: 4 1 2 5 3

What i need to pint in html is: 1 2 3 4 5

here is my code:

<template>
    <span v-for="blog in navigation" :key="blog._path">
      <h3 >Lecciones</h3>
     <NuxtLink 
     v-for="(link ) in blog.children.sort((a,b) => a-b)" 
     :key="link.slug" 
     :to="link._path"
     
     >
        <ol > 
        <li>
          <span >
            {{ link.slug }}
          </span>
        </li> 
      </ol>
     </NuxtLink>

    </span>
  </template>

<script setup>
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation('cuentos-biblicos'))

</script>

CodePudding user response：

You must sort by slug:

example:

blog.children.sort((a,b) => a.slug-b.slug)