Making object of items in decending order data object in vue.js

Question

In vue.js, in my data object I have an object of items that are sorted in one order. I want to make it in decending order. My vue template looks like below snippet -

<div class="form-element form-element-checkbox" :key="key" v-for="(value, key) in items">
          <input
            :id="getID(value)"
            type="checkbox"
            :value="value"
            @change="updateFilter"
            v-model="selections"
            :checked="isSelected(value)">
          <label class="chk-small" :for="getID(value)">
            <span :aria-label="`Rated ${key}.0 out of 5`" class="star-rating noBlank" :style="{ width: `${key * 20}px` }"></span>
          </label>
        </div>

And items object looks like

data() {
      return {
        items: {
          5: 'item_5',
          4: 'item_4',
          3: 'item_3'
        },
        selections: []
      };
    },

Storing data in that order does't work.Tried to use items.slice().reverse() also. What might be wrong here ? I'm not able to get.

Answer 1

If you cannot / do not want to change your items dictionary into an array, you can simply use Object.keys() to extract its keys and work on them.

 new Vue({ el: '#app', data() { return { items: { // Note: even though you write them in descending order, // the JS engine will list them in ascending order. 5: 'item_5', 4: 'item_4', 3: 'item_3', }, }; }, }); 

 <script src="https://unpkg.com/vue@2"></script> <div id="app"> <p>itemsKeys: {{Object.keys(items)}}</p> <ol> <li v-for="(key, keyIndex) of Object.keys(items).reverse()"> keyIndex: {{keyIndex}} / item key: {{key}} / item value: {{items[key]}} </li> </ol> </div>