orderBy on a Nuxt3 v-for loop

Question

I have a Nuxt3 project and my v-for loop is working, but I can't figure out how to order my list.
I know it's a Vue thing and not Nuxt, but I am new to both.

<template>
  <div class="max-w-7xl mx-auto my-10 sm:px-6 lg:px-8">
    <div v-if="pending">Loading ...</div>
    <div v-else>
      <ul class="list-none" style="columns: 4">
        <li
          v-for="nda in ndas"
          v-bind:key="nda.id"
          class="font-color: text-slate-600 hover:text-red-600 hover:underline"
        >
          <Nuxt-link :to="'/ndas/' + nda.id">
          {{ nda.user_signature }}
          </Nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const { pending, data: ndas } = useLazyFetch(
  "https://***/nda-data.json"
);
watch(ndas, (newNdas) => {});
</script>

You should use rather `` or ``, not a mix of both. Then, it's hard to help you here because you're only showing some Vue code while your issue is totally not related to Vue. This is a vanilla JS issue on how to orderBy things on an array. But, we actually need that array to be able to see how (and on which key mainly) we want to order them by. — kissu, Aug 24 '22 at 08:34
Also, `v-bind:key` is basically the same as `:key`, so write it with `v-bind:` or `:` all the time (as you did for `:to`) but don't mix them too. — kissu, Aug 24 '22 at 08:35
Regarding the title, what I'm trying to say is that you don't orderBy inside of a `v-for` loop but you do that ahead of time. Like in my [answer here](https://stackoverflow.com/a/73437532/8816585) when I have a computed with `groupedCategories`: we reduce it, then we loop on it in the template. You don't do both at the same time to not have something messy (and also because of performance reasons I'd say). — kissu, Aug 24 '22 at 08:44

score 0 · Answer 1 · answered Aug 24 '22 at 08:56

0

You need to computed filtered array for this. Just create a new computed property and return filtered array.

const filteredNdas = computed(() => {
  return ndas.filter(item => item.id > 5)
})

And so use your new array in the v-for loop

v-for="nda in filteredNdas"

answered Aug 24 '22 at 08:56

Sandex

95
6

Here, you're filtering and not ordering. Since we don't know OP's data structure (yet), you can't really answer that question yet anyway. – kissu Aug 24 '22 at 08:58
You can use sort method instead. it doesn't change the essence. I thought so, because the question sounds like "how to v-for order works in vue.js", not for example "how to order my array" – Sandex Aug 24 '22 at 09:05

orderBy on a Nuxt3 v-for loop

1 Answers1