Vue 2中如何在v-for中置顶当前用户的展开面板

要实现将匹配当前登录用户ID的展开面板置顶，核心思路是先对数据源进行排序，把符合条件的项放在数组最前面，再基于排序后的数组渲染面板。

步骤1：添加计算属性处理数组排序 #

在Vue组件的computed选项中，创建一个处理后的数组，确保当前用户的签名项始终排在最前：

computed: {
  sortedDemandSignatures() {
    // 复制原数组避免修改源数据，然后排序
    return [...this.demandSignatures].sort((a, b) => {
      // 当前用户的项优先级最高，排前面
      if (a.userEid === this.userID) return -1;
      if (b.userEid === this.userID) return 1;
      // 其他项保持原有顺序
      return 0;
    });
  }
}

步骤2：修改模板渲染逻辑 #

将原模板中v-for遍历的数据源替换为上面的计算属性，同时建议使用唯一标识（如sign.eid）作为:key，避免数组排序后DOM复用导致的异常：

<v-expansion-panels>
  <!-- 替换为排序后的数组，key改用sign.eid -->
  <v-expansion-panel v-for="(sign, index) in sortedDemandSignatures" :key="sign.eid">
    <v-expansion-panel-header
      @click="dataEdit(sign)"
      :hide-actions="userID !== sign.userEid"
      :disabled="userID !== sign.userEid"
    >
      <v-row>
        <v-col cols="1"></v-col>
        <v-col cols="4">
          {{ sign.userFullName }}
        </v-col>
        <v-col>
          <span
            v-if="sign.signatureStatus === 'Accepted'"
            class="text-success"
          >امضا شده</span>
          <span
            v-else-if="sign.signatureStatus === 'Rejected'"
            class="text-danger"
          >رد شده</span>
          <span
            v-else-if="sign.signatureStatus === 'pending'"
            class="text-warning"
          >در انتظار تایید</span>
        </v-col>
      </v-row>
    </v-expansion-panel-header>
    <v-expansion-panel-content v-if="userID === sign.userEid">
      <v-divider />
      <v-card-text class="mt-3">
        <v-textarea
          label="توضیحات"
          v-model="description"
          outlined
          dense
        ></v-textarea>
      </v-card-text>
      <v-card-actions class="mx-4 justify-end d-flex">
        <v-btn
          class="me-2"
          icon
          small
          @click="signForm(sign.eid, 'Accepted', acceptText)"
        >
          <v-icon small color="teal">mdi-draw-pen</v-icon>
        </v-btn>
        <v-btn
          class="ms-2"
          icon
          small
          @click="signForm(sign.eid, 'Rejected', rejText)"
        >
          <v-icon small color="red">mdi-close</v-icon>
        </v-btn>
      </v-card-actions>
      <v-divider />
    </v-expansion-panel-content>
    <v-expansion-panel-content v-else></v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

说明 #

• 计算属性会自动响应userID或demandSignatures的变化，实时更新排序结果，确保当前用户面板始终置顶。
• 使用sign.eid作为:key比index更稳定，因为数组排序后index会变化，可能导致Vue的DOM复用逻辑出错。

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