عرض قائمة مع مفتاح ثابت بإستخدام v-for
ال v-for بتكرر العنصر لكل قيمة في المجموعة والمفتاح الثابت بيساعد Vue تميز العناصر
المثال داخل مشروع Vue 3 يدعم ملفات SFC
تطبيق الفكرة
بنستخدم المعرف كمفتاح بدل فهرس العنصر
ملف App.vue
<script setup>
import { ref } from "vue";
const skills = ref([{ id: 1, name: "HTML" }, { id: 2, name: "CSS" }]);
</script>
<template>
<ul><li v-for="skill in skills" :key="skill.id">{{ skill.name }}</li></ul>
<button @click="skills.reverse()">Reverse</button>
</template>النتيجة
ترتيب العناصر بينعكس مع الضغط وكل عنصر بيحتفظ بمعرفه