vuej에서 클릭한 버튼에만 로딩을 추가하려면 어떻게 해야 하는가?

vuej에서 클릭한 버튼에만 로딩을 추가하려면 어떻게 해야 하는가?

API에서 나오는 데이터를 루프하고 출력하는 테이블이 있다.나는 테이블 안에 단추를 추가했다.클릭 시 클릭 버튼 ID를 전송하고 출력해야 하는 기능 데이터를 수신할 때까지 로딩 중이어야 한다.여기 내 암호야.

<table id="customers">
  <tr>
    <th>{{$t('message.numberReport')}}</th>
    <th>{{$t('message.periodFrom')}}</th>
    <th>{{$t('message.periodTo')}}</th>
    <th>{{$t('message.printButton')}}</th>
  </tr>
  <tr v-for="(item,index) in getReportInfo" :key="index">
    <td>{{ item.id }}</td>
    <td>{{ item.periodFrom }}</td>
    <td>{{ item.periodTo }}</td>
    <td>
      <v-btn
        class="primary"
        :loading="loading"
        :disabled="loading"
        @click="fetchGetReportDetailed(item)"
      >{{ $t('message.printButton')}}</v-btn>
    </td>
  </tr>
</table>                    

그런데 특정 버튼을 클릭하자 모든 버튼이 로드 모드로 들어가고 있다.어떻게 고쳐야 하지?어떤 제안이라도 깊이 감사할 것이다.여기 시각적인 예가 있다.

사용.index목록에 있는 항목의.

예를 들어 데이터에 새 변수를 등록할 수 있음indexClicked .

data () {
    return {
        // Some predefined value, 0 isn't good because index can be 0.
        indexClicked: undefined // Some predefined value
    }
}

그리고 당신이 버튼을 클릭하면 당신은 보낼 수 있다.index값:

<td>
<v-btn class="primary"
       :loading="loading && indexClicked === index" 
       :disabled="loading && indexClicked === index" 
       @click="fetchGetReportDetailed(item, index)">
       {{ $t('message.printButton') }}
</v-btn>
</td>

그리고 네 안에fetchGetReportDetailed(item, index)할당해야 하는 방법index로this.indexClicked다음과 같다:

fetchGetReportDetailed (item, index) {
    // Your code
    this.indexClicked = index;
}

이거면 될 거야.그러나 더 많은 정보가 필요하면 코드를 입력하십시오.

다음에서 여러 조건에 문제가 있는 경우 주의하십시오.:disable조건에 따라 참 또는 거짓으로 반환되는 방법을 만들 수 있다.loading && this.indexClicked === index.

행운을 빈다!

모든 행에 단일 데이터 속성을 사용하므로 마운트된 후크에 다음 속성을 추가하십시오.loading다음과 같은 각 행에:

mounted(){
   this.getReportInfo=this.getReportInfo.map(rep=>{
               rep.loading=false;
             return rep;
         });
}

템플릿의 기능:

   <tr v-for="(item,index) in getReportInfo" :key="index">
                            <td>{{ item.id }}</td>
                            <td>{{ item.periodFrom }}</td>
                            <td>{{ item.periodTo }}</td>
                            <td><v-btn  class="primary" :loading="item.loading" :disabled="loading"  @click="fetchGetReportDetailed(item,index)" >{{ $t('message.printButton')}}</v-btn></td>
                        </tr>

에fetchGetReportDetailed방법:

fetchGetReportDetailed(item,index){

....

this.getReportInfo[index].loading=true;
this.$set(this.getReportInfo,index,this.getReportInfo[index])
}

너는 그것을 분리할 수 있다.tr데이터를 자체 상태 완전 구성 요소로 표시하고 구성 요소 내에서 함수를 호출하는 것이다.

이렇게 하면 배열의 각 항목에 대한 로딩 상태는 자체 구성요소에 로컬이 된다.

참조URL: https://stackoverflow.com/questions/57545308/how-can-i-add-loading-only-to-the-clicked-button-in-vuejs