Vue.js中如何按名称、价格等指定条件对数组进行排序？

实现方案 #

原有代码存在的问题 #

• 按钮绑定的sortbyname方法未定义，第二个按钮的点击事件绑定错误，且关闭标签存在拼写错误</buttton>多了一个t
• 列表渲染时调用了不存在的item.message字段，和数据里的字段不匹配
• price字段是字符串类型，直接排序会按字典序逻辑处理（比如123会排在22前面），不符合数值排序预期
• 已定义的sortBy通用排序方法没有被实际调用

修改后的完整代码 #

JS 逻辑

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { price: '1', name: 'vv' },
      { price: '22', name: 'aa' },
      { price: '55', name: 'cc' },
      { price: '77', name: 'bb' },
      { price: '123', name: 'ee' },
      { price: '53', name: 'dd' },
    ]
  },
  methods: {
    sortBy(key) {
      // 直接对原数组排序，触发响应式更新
      this.items.sort((a, b) => {
        let valA = a[key]
        let valB = b[key]
        // 如果是price字段，转成数值比较
        if (key === 'price') {
          valA = Number(valA)
          valB = Number(valB)
        }
        if (valA < valB) return -1
        if (valA > valB) return 1
        return 0
      })
    }
  }
})

HTML 模板

<!-- v-for - 按name和price排序数组 -->
<ul id="example-1">
  <li v-for="item in items" :key="item.price">
    价格：{{ item.price }} 名称：{{ item.name }}
  </li>
</ul>

<hr />
<div class="bbb">
  <button @click="sortBy('name')">按名称排序</button><br/>
  <button @click="sortBy('price')">按价格排序</button>
</div>

改动说明 #

• 简化了sortBy方法，直接接收排序字段作为参数，内部处理原数组触发视图更新，不需要单独写两个排序方法
• 针对price字段做了数值转换，保证排序逻辑符合数字大小预期
• 修正了按钮的点击事件绑定、标签拼写错误、列表渲染字段不匹配的问题
• 给v-for加了key属性，符合Vue的列表渲染最佳实践
• 调整了测试数据的name字段，方便看到排序效果

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