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 class="text-lg mb-1 light-text-1">Lecciones</h3>
     <NuxtLink 
     v-for="(link ) in blog.children.sort((a,b) => a-b)" 
     :key="link.slug" 
     :to="link._path"
     class="flex flex-row space-x-1 no-underline prose-sm font-normal py-1 px-4 -mx-4"
     >
        <ol class="pl-1"> 
        <li>
          <span class="light-text-1 ">
            {{ link.slug }}
          </span>
        </li> 
      </ol>
     </NuxtLink>

    </span>
  </template>

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

</script>

>Solution :

You must sort by slug:

example:

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