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

您为所有按钮使用了相同的data属性，因此这些按钮共享相同的loading状态，这一次会影响，请尝试添加一个名为index的data属性表示当前单击的按钮索引：

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>

Answer 2

实际上比您想象的要容易得多

<TechnicalProfile Id="AAD-Common">...<Item Key="ClientId">57ff56e7-40a0-43fd-a9a3-8d6c1544bcf4a</Item>

<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: {}, } },是不确定的，因此它将被评估为false，一旦您在click事件中确定其值，它将被评估为true，对我有用，希望对您有所帮助。

在v-for循环内将Vuetify v-btn与加载程序一起使用

2 个答案: