Nuxt3 v-for 循環上的 orderBy

Question

我有一個 Nuxt3 項目，我的v-for循環正在工作，但我不知道如何訂購我的列表。
我知道這是 Vue 而不是 Nuxt，但我對兩者都是新手。

<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>

Answer 1

您需要為此計算過濾數組。 只需創建一個新的計算屬性並返回過濾后的數組。

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

所以在 v-for 循環中使用你的新數組

v-for="nda in filteredNdas"