在 v-for 循環中使用帶有加載器的 Vuetify v-btn

Question

我想弄清楚如何讓我在 for 循環中動態生成的按鈕每個都有一個單獨的加載程序。 Vuetify 有帶有 Loader 的按鈕。

我遇到的問題是，當這些按鈕處於 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 個項目。 上面的代碼將生成三個按鈕，但它們都將共享相同的加載參數。 我怎樣才能讓每個按鈕使用它唯一的加載參數？ 一如既往，我們非常感謝您的幫助。

Answer 1

您對所有按鈕使用相同的數據屬性，因此這些按鈕共享相同的loading狀態，這會影響一次，為了有所不同，請嘗試添加一個名為index的數據屬性，它表示當前單擊的按鈕索引：

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

並將 loading 道具綁定到條件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>

Answer 2

它實際上比你想象的要容易得多：

<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，一旦你在 click 事件中建立它的值，它就會被評估為 true，它對我有用，希望它有幫助。

Answer 3

您可以使用反應數組來防止像這樣更改索引。

<div v-for="(item, i) in items" :key='i'>
<v-btn @click.prevent="testload(i)" :loading="loading[i]"></v-btn>
</div>

data () {
  return {
    loading: [],
  }
},
methods: {
    testload: function (index) {
        // reactive array
        this.$set(this.loading, index, true);
        console.log(index)
        console.log(this.loading[index])
        // stop loading after x miliseconds
        setTimeout(() => (this.$set(this.loading, index, false)), 3000)
    },

不要忘記根據項目的長度輸入false，這是示例：

getDataAll: function () {
                var i = 0
                for (i = 0; i < items.length; i++) {
                    this.loading.push(false);
                }
             }