在 v-for 循环中使用带有加载程序的 Vuetify v-btn

Question

我想弄清楚如何让我的动态生成的按钮在 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 个项目。上面的代码将生成三个按钮，但它们都将共享相同的加载参数。我怎样才能让每个按钮使用它唯一的加载参数？与往常一样，非常感谢任何和所有帮助。

Answer 1

您对所有按钮使用相同的数据属性，因此这些按钮共享相同的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>