在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()。这可能是什么问题?我没办法
答案 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>