CODEWITHSUNDEEP
vue.jsnuxt.jsvuetify.js
pixhan
pixhan

Reputation: 11

Every button getting loaded on clicking single button in Nuxt vuetify

When I am clicking on View Button every button is getting spinned. Here is the code which I used to view payload. Though I am getting correct data after clicking button, button I want to know reasons why every button is getting loaded though I have clicked on only one View.

Here are the screenshots Before Click After Click 

<v-data-table
      :headers="headers"
      :items="tasks"
      class="elevation-1"
      :loading="loading"
      hide-actions
    >
      <template v-slot:items="props">
        <td>{{ props.item.reason }}</td>
        <td>{{ props.item.requestedBy.adminName }}</td>
        <td>{{ new Date(props.item.createdAt).toLocaleString("en") }}</td>
        <td class="layout px-0">
          <v-btn
            small
            :loading="downloadingPayload"
            @click="getPayload(props.item._id)"
          >
            View
          </v-btn>
        </td>
      </template>
    </v-data-table>

Upvotes: 0

Views: 250

Answers (1)

mk_xt
mk_xt

Reputation: 561

It is because you have the same data for all the elements.

:loading="downloadingPayload"

i guess you have something like this in your method

getPayload (item) { this.downloadingPayload = true  }

need to have a downloadingPayload for each item and do something like

getPayload (item) {
   item.downloadingPayload = true
}

and in the template

:loading="props.item.downloadingPayload"

Upvotes: 1

Related Questions