Javascript 在vuejs和laravel中的循环中显示特定的div`@单击`

我试图在单击时显示隐藏的俯冲，但由于使用循环，我遇到了麻烦，在循环中，我的所有俯冲都是动态的。当我点击按钮时，它会显示所有div，但我想在单击时显示特定的单个div。我试过这样的东西-

index.blade.php

---

项目数组在blade中呈现，因此当它到达前端时，Vue不知道它。 另外，

isActive

对于应用程序组件是全局的，因此它适用于所有项目

您需要将阵列作为道具传递给vue组件，然后使用

v-for

在其上循环

<div class="row" v-for="(item, index) in {{ data['a'] }}" :key="index">
    <!-- same body of the loop as before -->
</div>

然后将索引和项添加到

myFilter（$event，index，item）

函数中，以更新数组中的相应项

---

您需要使用列出的方法之一更新该项

如果您不想将其移动到它自己的组件，那么您需要有一个唯一的标识符来显示循环中的哪个div是活动的。您当前的设置是无法知道单击了哪个div，您只需切换一个标志，即显示所有或没有任何div

解决这个问题的一种方法是使用

foreach

循环的索引，例如

@foreach($data['a'] as $key => $row)

然后，对于您的vue实例，您可以：

<script>
    var vm = new Vue({
        el: '#myApp',
        data: {
            activeKey: null,
        },

        methods: {
            isActive(i) {
                return this.activeKey === i;
            },
            toggleActive(i) {
                this.activeKey = this.isActive(i) ? null : i;
            }
        }
    })
</script>

var vm=新的Vue({
el:“#myApp”，
数据：{
activeKey:null，
},
方法：{
i活动（i）{
返回this.activeKey==i；
},
toggleActive（一）{
this.activeKey=this.isActive（i）？null:i；
}
}
})

由于逻辑已略有更改，您需要更新刀片文件中的几行：

<button @click='toggleActive($key)'>Comment</button>
<div v-bind:class="{ noActive: isActive($key) }">   

注释

这种方法对于一个非常小的项目或者vue没有被大量使用的项目来说是很好的，但是，如果不是这样的话，我建议将其重构为一个组件

---

好吧，使用组件。在这种情况下，每个组件都有自己的状态。伙计，这个问题的细微变化反复出现。

<script>
    var vm = new Vue({
        el: '#myApp',
        data: {
            activeKey: null,
        },

        methods: {
            isActive(i) {
                return this.activeKey === i;
            },
            toggleActive(i) {
                this.activeKey = this.isActive(i) ? null : i;
            }
        }
    })
</script>

<button @click='toggleActive($key)'>Comment</button>
<div v-bind:class="{ noActive: isActive($key) }">