[Vuejs]-Change the order of an object

by

0👍

✅

You should not define data in computed. Do it in data.

You should use computed to return data in any other form than how it is in data, a sorted array is a perfect example.

:key should have an unique value. :key="item.id" might be better.

<template>
  <div v-for="item in superTab" :key="item.id">
    {{ item.id }}/{{ item.order }}
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      starfleet: [
        { id: 1, order: 10 },
        { id: 2, order: 9 },
        { id: 3, order: 8 },
        { id: 4, order: 7 },
      ],
    };
  },
  computed: {
    superTab() {
      return this.starfleet.sort((a, b) => a.order - b.order);
    },
  },
});
</script>

Vue SFC Playground

0👍

Please first try

computed: {
starfleet() {
  const array = [
    {id: 1, order: 10},
    {id: 2, order: 9},
    {id: 3, order: 8},
    {id: 4, order:7}
  ]
return array
}

Rewrite superTab like below

superTab() {
  return this.starfleet.orderBy(starfleet, 'order', 'asc');
},

Leave a comment