时间戳

首页 > 解决方案 > 对象上的 Vuejs v-for 不应按索引排序

javascript - 对象上的 Vuejs v-for 不应按索引排序

问题描述

我正在 Vuejs 中迈出第一步。我有一个对象成员，按成员名称排序。但是当我做一个 v-for 时，它是按对象索引排序的。

如何禁用该行为或按 member.name 再次执行我的订单？

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    members: {
        '3432':{'name':'Andreas', "age":39},
        '234':{'name':'Frank', "age":21},
        '333':{'name':'Dieter', "age":2},
        '8644':{'name':'Klaus', "age":66}
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <h1>{{ message }}</h1>
    <ul v-for="(member) in members" v-bind:key="member.name">
        <li> {{ member.name }} {{ member.age }}</li>
    </ul>
</div>

标签： javascriptvue.js

解决方案

循环对象是个坏主意。改用数组

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    members: [
        {'name':'Andreas', "age":39},
        {'name':'Frank', "age":21},
        {'name':'Dieter', "age":2},
        {'name':'Klaus', "age":66}]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <h1>{{ message }}</h1>
    <ul v-for="member in members" v-bind:key="member.name">
        <li> {{ member.name }} {{ member.age }}</li>
    </ul>
</div>

推荐阅读