如何基于order参数对Vue组件中的用户目标列表排序渲染？

问题的核心在于，你当前直接遍历的是一个对象，而Vue 2中v-for遍历对象时，默认是按照对象键的枚举顺序来渲染的，不会自动识别你定义的order属性。要实现按order字段升序（Lucas → Cole → Alen）渲染，我们需要先把对象转换成数组，再对数组进行排序。

具体实现步骤： #

• 在组件中添加一个计算属性，将传入的users对象转换为数组，并根据order字段排序。
• 修改模板，遍历排序后的数组而非原对象。

修改后的完整代码： #

JavaScript部分：

const userGoals = { 
  "Alen": { order: 2, goals: ["Learn JavaScript.", "Learn VueJS.", "Learn React."] }, 
  "Cole": { order: 1, goals: ["Learn JavaScript.", "Learn to paint.", "Learn Karate."] }, 
  "Lucas": { order: 0, goals: ["Learn to draw.", "Build a canoe.", "Learn to paint."] } 
}

Vue.component('goal-list', {
 props: { users: Object },
 // 添加计算属性处理排序
 computed: {
  sortedUsers() {
    // 将对象转换为数组，保留用户名和用户数据
    return Object.entries(this.users)
      .map(([name, user]) => ({ name, ...user }))
      // 按order字段升序排序
      .sort((a, b) => a.order - b.order);
  }
 },
 template: `
 <div>
 <!-- 遍历排序后的数组 -->
 <ol v-for="(user, index) in sortedUsers" :key="user.name">
 <strong>{{ user.order }} {{ user.name }}</strong>
 <li v-for="(goal, goalIndex) in user.goals" :key="goalIndex"> {{ goal }}</li>
 </ol>
 </div>
 `
});

var list = new Vue({
 el: '#userList',
 data: { users: userGoals }
})

HTML部分（无需修改，保持原结构即可）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!doctype html>
<html lang="en">
<head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <title>Goals</title>
</head>
<body>
 <h1>Goals</h1>
 <div id="userList">
 <goal-list :users="users"></goal-list>
 </div>
</body>
</html>

代码说明： #

• Object.entries(this.users)：把用户对象转换成[用户名, 用户数据]的二维数组，比如["Alen", {order:2, goals: [...]}]。
• map(([name, user]) => ({ name, ...user }))：把二维数组转换为包含用户名和用户数据的对象数组，方便后续在模板中显示用户名。
• .sort((a, b) => a.order - b.order)：按order字段升序排序，保证order值小的用户排在前面。
• 模板中新增:key="user.name"和:key="goalIndex"：为v-for循环添加唯一key，提升Vue的渲染性能，避免控制台警告。

这样修改后，组件就会按照Lucas（order=0）→ Cole（order=1）→ Alen（order=2）的顺序渲染用户列表了。

内容的提问来源于stack exchange，提问作者Alen Subasic