v-for 루프 내의 로더와 함께 Vuetify v-btn 사용

v-for 루프 내의 로더와 함께 Vuetify v-btn 사용

For 루프 내에서 동적으로 생성된 버튼 각각에 별도의 로더를 설치하는 방법을 찾고 있습니다.Vuetify에는 로더 버튼이 있습니다.

문제가 되는 것은 이 버튼들이 for 루프에 있고 하나를 클릭하면 모두 로딩 인디케이터가 표시된다는 것입니다.로딩 인디케이터는 클릭하신 것만으로 표시해 주셨으면 합니다.

HTML:

<div v-for="(item, i) in items" :key='i'>

<v-btn 
dark 
color="pink"
:loading="loading"
@click="loader = 'loading'"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

대본

data () {
      return {
        loader: null,
        loading: false
      }
    },

3가지 아이템이 있다고 칩시다.위의 코드는 3개의 버튼을 생성하지만 모두 동일한 로드 파라미터를 공유합니다.각 버튼에 유일한 로딩 파라미터를 사용하려면 어떻게 해야 합니까?항상 그렇듯이 모든 도움에 감사드립니다.

모든 단추에 동일한 데이터 속성을 사용하므로 이러한 단추는 동일한 데이터 속성을 공유합니다.loading한 번에 영향을 주는 상태, 차이를 만들기 위해 데이터 속성을 추가합니다.index이는 현재 클릭되고 있는 버튼인덱스를 나타냅니다.

data () {
      return {
        index:-1,
        loader: null,
        loading: false
      }
    },

로딩 소품을 조건에 결합합니다.loading && i==index클릭 이벤트 시 현재 인덱스 업데이트@click="loader = 'loading';index=i":

<div v-for="(item, i) in items" :key='i'>

<v-btn 
dark 
color="pink"
:loading="loading && i==index"
@click="loader = 'loading';index=i"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

실제로는 생각보다 훨씬 간단합니다.

<div v-for="(item, i) in items" :key='i'>
<v-btn 
dark 
color="pink"
:loading="loading[index]"
@click="loading[index] = true"
>
  <v-icon>location_on</v-icon> Lookup
  <span slot="loader">locating...</span>
  <span slot="loader" class="custom-loader">
      <v-icon dark>cached</v-icon>
  </span>
</v-btn>

</div>

data () {
      return {
        loading: {},
      }
    },

처음에loading[index]정의되어 있지 않기 때문에 false로 평가됩니다.클릭 이벤트에서 값을 설정하면 true로 평가됩니다.제게는 효과가 있었습니다.

언급URL : https://stackoverflow.com/questions/57617579/use-vuetify-v-btn-with-loader-inside-a-v-for-loop