[Vuejs]-How to order object in v-for to stay on top Vue 2

by

0👍

Modify your demandSignatures data by plucking the item whose id is equal to userID and put it in the first position. You can do this job on the mounted hook.

Here is the working demo-

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-expansion-panels>
          <v-expansion-panel v-for="(sign, index) in demandSignatures" :key="sign.userEid">
            <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>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {
          return {
            userID: 3,
            description: null,
            demandSignatures: [{
                userEid: 1,
                userFullName: "I am not equal to userID",
                signatureStatus: "Accepted"
              },
              {
                userEid: 2,
                userFullName: "I am not equal to userID",
                signatureStatus: "pending"
              },
              {
                userEid: 3,
                userFullName: "I am equal to userID",
                signatureStatus: "Rejected"
              },
              {
                userEid: 4,
                userFullName: "I am not equal to userID",
                signatureStatus: "Rejected"
              },
            ],
          };
        },
        mounted() {
          this.reOrder();
        },
        methods: {
          reOrder() {
            // Find the index of item who match with userID
            let index = this.demandSignatures.findIndex(
              (item) => item.userEid == this.userID,
            );
            // If item found
            if (index != -1) {
              // save it in some local variable
              let item = this.demandSignatures[index];
              // remove it from its current position
              this.demandSignatures.splice(index, 1);
              // and put it at the first position
              this.demandSignatures.unshift(item);
            }
          },
          dataEdit() {},
          signForm() {},
        },
      })
    </script>
  </body>
</html>

Leave a comment