在vue.js中按降序数据对象创建项目对象

时间:2018-06-20 18:08:48

标签: javascript vue.js

在vue.js中,在我的数据对象中,有一个对象的对象按一种顺序排序。我想按降序排列。 我的Vue模板看起来像下面的代码段-

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

项目对象看起来像

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

按此顺序存储数据无效,还尝试使用items.slice()。reverse()。这可能是什么问题?我没办法

1 个答案:

答案 0 :(得分:0)

如果您不能/不想将items字典更改为数组,则可以简单地使用Object.keys()提取其键并对其进行操作。

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>