How to render ordered list base on the specific properly of an object?

I have simple table in vuetify

It rendered based on this objects

[ { “id”: 275, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 10, “max_iteration”: 0 }, { “id”: 274, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 9, “max_iteration”: 0 }, { “id”: 273, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 8, “max_iteration”: 0 }, { “id”: 272, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 7, “max_iteration”: 0 }, { “id”: 271, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 6, “max_iteration”: 0 }, { “id”: 270, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 5, “max_iteration”: 0 }, { “id”: 269, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 4, “max_iteration”: 0 }, { “id”: 268, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 3, “max_iteration”: 0 }, { “id”: 267, “group_id”: 119, “url”: “https://cnn.com”, “url_num”: 2, “max_iteration”: 0 }, { “id”: 266, “group_id”: 119, “url”: “https://www.apple.com”, “url_num”: 1, “max_iteration”: 2 } ]

You can see how it’s display base on the order of the objects. I would like to display in the order of url_num. How do I do that?

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<template id="mainbox">
  <v-card outlined>
    <v-list-item three-line>
      <v-list-item-content>
        <div class="text-overline mb-1">

          {{ title }}
        </div>
        <v-container>
          <!-- -------------------------------------------------------------------------- -->
          <v-divider></v-divider>
          <div class="py-2"></div>
          <!-- -------------------------------------------------------------------------- -->
          <!-- TEST CODE -->
          <!-- --------- -->




          <v-simple-table>
            <template v-slot:default class="my-20 py-20">
              <thead>
                <tr>
                  <th class="text-left">Order</th>
                  <th class="text-left">URL</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(urlGroup, i) in objects">
                  <td>{{ urlGroup.url_num }}</td>
                  <td>{{ urlGroup.url }}</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>






          <!-- -------------------------------------------------------------------------- -->
          <div class="py-2"></div>
          <v-divider></v-divider>
          <div class="py-2"></div>
          <!-- -------------------------------------------------------------------------- -->
          <!-- LIVE VALUE -->
          <!-- --------- -->






          <v-alert outlined type="success" text>
            <b>objects :</b> {{ objects }}
          </v-alert>




        </v-container>
      </v-list-item-content>
    </v-list-item>
  </v-card>
</template>


<v-app id="app">


  <!-- -------------------------------------------------------------------------- -->
  <!-- TITLE -->
  <!-- ----- -->



  <mainbox title="$CODE_08" />


  <!-- -------------------------------------------------------------------------- -->


</v-app>

<script type="text/javascript">
  const mainbox = Vue.component('mainbox', {
    template: '#mainbox',
    props: {
      title: String
    },
    data() {
      return {
        objects: [
    {
        "id": 275,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 10,
        "max_iteration": 0
    },
    {
        "id": 274,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 9,
        "max_iteration": 0
    },
    {
        "id": 273,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 8,
        "max_iteration": 0
    },
    {
        "id": 272,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 7,
        "max_iteration": 0
    },
    {
        "id": 271,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 6,
        "max_iteration": 0
    },
    {
        "id": 270,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 5,
        "max_iteration": 0
    },
    {
        "id": 269,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 4,
        "max_iteration": 0
    },
    {
        "id": 268,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 3,
        "max_iteration": 0
    },
    {
        "id": 267,
        "group_id": 119,
        "url": "https://cnn.com",
        "url_num": 2,
        "max_iteration": 0
    },
    {
        "id": 266,
        "group_id": 119,
        "url": "https://www.apple.com",
        "url_num": 1,
        "max_iteration": 2
    }
],
        form: {
          errors: {},
          values: {
            urlType: 'Single',
            urlTypes: ['Single', 'Multiple'],
          },
          rules: {
            urlType: [(v) => !!v || 'URL Type is required'],
          }
        }
      }
    },
    watch: {
      'form.values.urlType'() {
        console.log('urlTypes changed')
        console.log('urlTypes changed to ' + this.form.values.urlTypes)
      }
    },
    methods: {}
  });


  new Vue({
    el: "#app",
    vuetify: new Vuetify(),
    components: {
      mainbox
    }
  });

</script>

Answer

While there may be some inline method to invoke on the v-for iterator, the docs recommend using a simple JS sort, as in

array.sort((a,b) => a.url_num - b.url_num)

You can tack it onto the data array directly (as shown below) or create a separate array for it

let obj = {
  objects: [{
      "id": 275,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 10,
      "max_iteration": 0
    },
    {
      "id": 274,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 9,
      "max_iteration": 0
    },
    {
      "id": 273,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 8,
      "max_iteration": 0
    },
    {
      "id": 272,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 7,
      "max_iteration": 0
    },
    {
      "id": 271,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 6,
      "max_iteration": 0
    },
    {
      "id": 270,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 5,
      "max_iteration": 0
    },
    {
      "id": 269,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 4,
      "max_iteration": 0
    },
    {
      "id": 268,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 3,
      "max_iteration": 0
    },
    {
      "id": 267,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 2,
      "max_iteration": 0
    },
    {
      "id": 266,
      "group_id": 119,
      "url": "https://www.apple.com",
      "url_num": 1,
      "max_iteration": 2
    }
  ].sort((a, b) => a.url_num - b.url_num)
}

console.log(obj)

Advertisement

Answer