Javascript 在v-for循环中使用Vuetify v-btn和加载程序

我试图弄清楚如何在for循环中使用动态生成的按钮，每个按钮都有一个单独的加载程序。Vuetify具有带加载程序的按钮

我遇到的问题是，当这些按钮在for循环中，单击一个按钮时，它们都会显示加载指示器。我只想要一个点击显示加载指示器

HTML:

---

假设我有3项。上面的代码将生成三个按钮，但它们都将共享相同的加载参数。如何让每个按钮使用其唯一的加载参数？一如既往，我们非常感谢所有的帮助。

您对所有按钮使用相同的数据属性，因此这些按钮共享相同的

加载

状态，该状态会同时影响到，要想有所不同，请尝试添加名为

索引

的数据属性，该属性表示当前单击的按钮索引：

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

并将加载道具绑定到条件

加载和&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>

---

开始时，

加载[index]

将是未定义的，因此它将被评估为false，一旦您在单击事件中确定其值，它将被评估为true，这对我有效，希望有帮助。

这里有一个拼写错误

v-for=“（item，i）In items:key='i'”

应该是

v-for=“（item，i）In items”：key='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: {},
      }
    },