Show specific div `@click` in a loop in vuejs and laravel

I am trying to show hidden dive on click but, I am getting trouble for using a loop, in which my all divs are dynamic. When I am clicking the button it's showing all div, but I want to show specific single div on single click. I tried something like this -

index.blade.php

<div class="col-md-12" id="questionsection">
  @foreach ($data['a'] as $row)
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
         <button @click='myFilter($event)'>Comment</button>
         <div v-bind:class="{ noActive: isActive }">
            <form action="#" method="POST">
              <textarea class="textarea" name="answer"></textarea>
              <button>Save</button>
            </form>
         </div>
       </div>
     </div>
   @endforeach
</div>

.noActive{ display:none}

And in vuejs script is-

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

    methods: {
      myFilter: function (event){
        this.isActive = !this.isActive;
      }
    }
  })
</script>

Solution

If you're not wanting to move this to its own component, then you will need to have a unique identifier to show which div in the loop is meant to be active. Your current set up is does not have any way of knowing which div has been clicked and you're simply toggling a single flag meaning all or none of the divs being shown.

One way to get around this would be to use the index for the foreach loop e.g.

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

Then for your vue instance you could have:

<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>

Because the logic has been changed slightly, you will need to update a couple of lines in your blade file:

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

This approach would be fine for a very small project or one where vue isn't being used that much, however, if that is not the case I would suggest refactoring this to a component instead.

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