javascript - 在循环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>