在 v-for 循环中使用 Vuetify v-btn 和加载器

Posted 2023-02-23

【中文标题】在 v-for 循环中使用 Vuetify v-btn 和加载器

【英文标题】：Use Vuetify v-btn with loader inside a v-for loop

【发布时间】：2019-12-28 06:21:01

【问题描述】：

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

【问题讨论】：

这里有一个错字v-for="(item, i) in items :key='i'"应该是v-for="(item, i) in items" :key='i'

修正了错字，谢谢

【参考方案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>

【讨论】：

这成功了！谢谢你。你介意解释一下它为什么起作用吗？

我想我明白了。 :) 就等系统让我接受你的回答

我编辑了我的答案以解释更多我希望可以帮助你

我有一个与组合框类似的新问题，如果您不介意看一下，我在这里提出了一个单独的问题：***.com/questions/57628594/…

但是如果您单击第二个按钮，这将更改索引并将第一个按钮从加载状态中删除，即使它仍在加载...

【参考方案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]是未定义的，所以它会被评估为假，一旦你在点击事件中确定了它的值，它就会被评估为真，它对我有用，希望对你有帮助。