Vue.js中数组排序脚本失效问题求助

问题核心原因 #

你的代码存在两个关键问题导致排序功能失效：

1. Array.sort()原地修改原数组：sortedMessages中直接调用this.messages.sort()会修改原始的messages数组，破坏Vue计算属性的依赖追踪逻辑，导致视图无法正确响应排序变化。
2. 日期字符串比较的潜在不可靠性：虽然你的data_produktu是标准ISO格式字符串，直接比较多数情况有效，但转成Date对象进行数值比较是更稳妥的做法，能兼容更多日期格式场景。

修复后的代码 #

修正计算属性sortedMessages #

sortedMessages:function() {
  // 先复制原数组，避免修改原始数据
  return [...this.messages].sort((a,b) => {
    const modifier = this.currentSortDir === 'desc' ? -1 : 1;
    // 将日期字符串转为Date对象，通过时间戳差值比较
    const dateA = new Date(a[this.currentSort]);
    const dateB = new Date(b[this.currentSort]);
    return (dateA - dateB) * modifier;
  });
}

优化排序切换方法（可选） #

你的sort方法逻辑正常，可补充切换新字段时重置排序方向的逻辑，符合常规操作习惯：

sort: function(s){
  if(s === this.currentSort) {
    this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
  } else {
    this.currentSort = s;
    this.currentSortDir = 'asc'; // 切换新字段默认升序
  }
}

关键说明 #

• 使用[...this.messages]或this.messages.slice()创建原数组的浅拷贝，确保排序操作仅作用于副本，不干扰原始数据和Vue的响应式追踪。
• 将日期转为Date对象后，通过时间戳差值比较，比字符串比较更准确可靠，避免格式异常导致的排序错误。

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