VueJS应用页面加载时数据不显示，仅选下拉框后展示问题排查

你的问题核心在于初始状态下sortatoz为空字符串，而sortItems方法未处理空值的情况，导致页面加载时copiedList始终是空数组，自然没有数据展示。即使在mounted里调用sortItems()，因为此时sortatoz是默认的空值，方法里的两个条件分支都不会触发，copiedList还是没被赋值。

下面是几种具体的解决方式：

方法一：给sortatoz设置初始默认值 #

在data中给sortatoz添加初始值，比如默认使用"relevance"，页面加载时就会自动触发对应逻辑赋值：

return {
  list: ["A", "C", "B"],
  copiedList: [],
  sortatoz: "relevance" // 设置初始默认值
}

同时可以保留模板里的默认选中项，或者将其改为对应初始值的选项，确保状态一致。

方法二：修改sortItems方法，兼容空值场景 #

让sortItems在sortatoz为空时也执行赋值逻辑，比如默认按相关性展示原数据：

sortItems() {
  if (this.sortatoz === "alphabetically") {
    this.copiedList = [...this.list].sort((a, b) => (a > b ? 1 : -1));
  } else {
    // 空值或选中relevance时都走这个分支
    this.copiedList = [...this.list];
  }
}

修改后，即使初始sortatoz为空，调用sortItems()也会给copiedList赋值，页面就能正常显示数据。

方法三：改用计算属性（更推荐） #

排序场景更适合用计算属性，它会自动响应依赖变化，初始渲染时也会执行计算，无需手动调用方法：

// 替换原sortItems方法，新增计算属性
computed: {
  sortedList() {
    if (this.sortatoz === "alphabetically") {
      return [...this.list].sort((a, b) => (a > b ? 1 : -1));
    } else {
      // 空值或relevance时返回原数组副本
      return [...this.list];
    }
  }
}

然后修改模板中的循环数据源：

<div v-for="element in sortedList" :key="element">
  <div>{{ element }}</div>
</div>

这种方式不需要维护copiedList变量，Vue会自动处理响应式更新和初始渲染逻辑。

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