在循环 vuejs 中加载特定 div

Question

这是我在这个论坛上的第一个问题。我使用 jquery 有一段时间了，但现在我最近转向了 vuejs，发现它很棒。

这是我遇到的一个小问题。问题是我必须在循环中的按钮上设置 v-loading，当我单击时我需要它为真（即开始显示）。我就是这样做的，但我不知道如何触发它。

<div class="col-sm-12" style="padding:0;" v-for="follow_request in follow_requests" v-loading.body="true">
  <div class="col-sm-4">
    <img class="img-circle" :src="follow_request.user.image | appendBaseUrl"
         style="height:60px;"/>
  </div>
</div>


v-loading.body="true"

我需要在点击时将其设置为 true 和 false，但只有这个特定的 div。

Answer 1

我通常建议向您正在迭代的代表状态的对象添加一个属性。对于 follow_requests 数组中的每个 follow_request 对象，添加属性、loading.

然后你就可以在你的模板中使用它了。

<div class="col-sm-12" 
     style="padding:0;" 
     v-for="follow_request in follow_requests" 
     v-loading.body="follow_request.loading"
     @click="follow_request.loading = !follow_request.loading>

在循环 vuejs 中加载特定 div

loading on specific div in loop vuejs

javascript

vue.js

vue-component

vuejs2