在Vuejs和Laravel中的循环中显示特定的div`@click`

如果您不想将它移动到它自己的组件中,那么您需要有一个唯一的标识符来显示循环中哪个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>

由于逻辑发生了轻微更改,因此需要更新刀片文件中的几行:

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

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

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/7

项目数组在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) 函数更新数组中的相应项。

您需要使用列出的方法之一更新项目 in the doc .