Show child of this parent click vue

Question

I want to show the immediate child after clicking on its parent. Its easy on jquery, hard on vue, how can I do it?

template:

<boxes inline-template>    
<div class="white-box" @click="toggleTick">Purchase only 
        <div v-if="showTick"><i class="fas fa-check"></i></div>
    </div>
</boxes>

js

Vue.component('boxes', {
    data: function () {
        return {
            showTick: false
        }
    },
    methods: {
        toggleTick () {
          this.showTick = !this.showTick
      } 
    }
})
  var app = new Vue({
    el: '#app',
        data: {

        }
  })

At the moment I have multiple "white-box" div, it shows the child div for all of them, I just want to show the div for the clicked parent's child.

Answer 1

You should have behavior that you expect :

Vue.component('boxes', {
    data: function () {
        return {
            showTick: false
        }
    }
})
var app = new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <boxes inline-template>    
    <div class="white-box" @click="showTick = !showTick">
      <span>
        Purchase only 
      </span>
      <div v-if="showTick">Component 1</div>
    </div>
  </boxes>
  <boxes inline-template>    
    <div class="white-box" @click="showTick = !showTick">
      <span>
        Purchase only 
      </span>
      <div v-if="showTick">Component 2</div>
    </div>
  </boxes>
</div>

Answer 2

Your white-boxes are sharing the same showTick variable, so clicking on one fo them changes the value for all of them.

There are 2 available solutions to this:

• Have multiple boxes components and not multiple white-boxes under the same boxes component. Something take ends up looking like this in the DOM

  <boxes>...</boxes>
  <boxes>...</boxes>
  <boxes>...</boxes>
  

• Use an array for showTick and use an index when calling toggleClick. Also note that for the changes in the array to be reactive you need to use Vue.set.

I recommend the former solution.