Vue3列表排序功能触发this.lists.sort报错 提示sort不是函数

初始lists定义为数组，但从Firebase接口拉取数据赋值后，lists的实际类型从数组变为了普通对象：

• Firebase实时数据库拉取集合数据时，默认返回格式为「文档ID: 文档内容」的键值对对象结构，并非标准数组
• 直接将该返回对象赋值给lists后，lists变成了纯对象，而JavaScript中对象不存在原生sort方法，因此触发this.lists.sort is not a function异常
• 附加问题：原模板中排序按钮被放在<tbody>标签内部，不符合HTML语法规范，浏览器解析时会自动将按钮移出表格结构，可能引发布局错乱

1. 接口赋值环节强制转数组 #

在接口请求回调给lists赋值时，先判断返回值结构，统一转换为标准数组再赋值：

// 接口请求逻辑示例
const res = await fetch('/get')
const resData = await res.json()
// 数组直接用，对象则通过Object.values转为数组
this.lists = Array.isArray(resData) ? resData : Object.values(resData || {})

2. 排序方法增加兜底兼容 #

修改sortBy方法，在执行排序前增加类型判断，避免非数组场景的异常，同时优化字符串排序的兼容性：

methods: {
  sortBy(prop) {
    // 非数组场景先转数组
    if (!Array.isArray(this.lists)) {
      this.lists = Object.values(this.lists || {})
    }
    // 用localeCompare实现字符串排序，兼容大小写、特殊字符场景
    this.lists.sort((a, b) => {
      const valA = a[prop] || ''
      const valB = b[prop] || ''
      return valA.localeCompare(valB)
    })
  }
}

3. 修正模板DOM结构 #

将排序按钮从<tbody>内部移出，放到表格外部的正常DOM层级，保证结构合法性：

<template>
  <div class="container">
    <router-link to="/user/create" class="btn btn-success mt-5 mb-5">Add New</router-link>
    <!-- 排序按钮放在表格外部区域 -->
    <div class="mb-3">
      <button @click="sortBy('email')">Sort by email</button>
      <button @click="sortBy('username')">Sort by Name</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Username</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in lists" :key="index">
          <td scope="row">{{ index }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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