Vue.js计算属性中数组排序失效，求正确实现方式

核心错误点 #

1. 字符串排序逻辑错误 #

你在排序时使用了a.lname - b.lname，这种减法操作仅适用于数字类型比较。对于字符串，减法运算会返回NaN，而sort函数遇到NaN时无法正确判断顺序，导致数组排序完全失效。

2. 原地排序修改原数组 #

Array.sort()是原地排序方法，会直接修改原数组this.people。在computed属性中直接使用会违背其"无副作用"的设计原则，还可能引发不必要的视图更新或数据混乱。

修正后的computed属性 #

computed:{
  sortedPeople(){
    // 先复制原数组，避免修改data中的原始数据
    return [...this.people].sort((a, b) => {
      // 使用localeCompare比较字符串，支持多语言排序，默认实现升序
      return a.lname.localeCompare(b.lname);
    })
  }
}

代码说明 #

• [...this.people]：通过扩展运算符创建原数组的浅拷贝，确保排序操作不会影响原始数据
• localeCompare(b.lname)：专门用于字符串的比较方法，返回负数、0或正数，分别对应a在b前、两者相等、a在b后，完美适配sort函数的要求

额外优化：Table组件的v-for位置 #

你的Table组件将v-for写在了<tbody>标签上，这会导致每个person生成一个独立的<tbody>，不符合HTML规范。建议把v-for移到<tr>标签上：

<template>
    <table class="table table-sm table-responsive table-hover">
        <thead>
            <tr>
                <th>Number</th>
                <th>Names</th>
                <th>Score</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(person, i) in people" :key="i">
                <td>{{ i + 1 }}</td>
                <td>{{ `${person.fname} ${person.lname}` }}</td>
                <td>{{ Math.floor(Math.random() * 100) }}/100</td>
            </tr>
        </tbody>
    </table>
</template>

同时给v-for加上:key属性（Vue要求列表渲染必须提供唯一key以优化性能）；将i+=1改为i+1，避免修改循环变量本身引发潜在问题。

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