CODEWITHSUNDEEP
vue.jsvue-component
artworkjpm
artworkjpm

Reputation: 1347

Show child of this parent click vue

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.

Upvotes: 2

Views: 1807

Answers (2)

Adrien Rosi
Adrien Rosi

Reputation: 132

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>

Upvotes: 1

Radu Diță
Radu Diță

Reputation: 14181

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.

Upvotes: 1

Related Questions