在 vue.js 中以递减顺序数据对象创建项目的对象

Question

在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((。这里可能出了什么问题？我无法得到。

Answer 1

如果您不能/不想将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>