javascript - 在 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 prop 绑定(bind)到条件 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>