CODEWITHSUNDEEP
javascriptvue.js
user1040259
user1040259

Reputation: 6509

Vuejs show/hide condition

Adding and removing dynamic items is functioning. I'm wanting to additionally show/hide elements under each. However, when I "show/hide" it toggles all. How can I call only the current index (toggle method?) 

var app = new Vue({
    el: '#app',
    data: {
    inputProject: [],
    counter:0,
    active : false
    },
    methods: {
    addInput: function() {
            this.inputProject.push(this.counter);
            this.counter++
        },
    removeInput: function(index) {
            this.inputProject.splice(index,1);
        },
    toggle: function (index) {
      this.active = !this.active;
    }
    }
})

enter image description here

Jsfiddle here: https://jsfiddle.net/rhgz83e2/30/

Upvotes: 2

Views: 6552

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48427

What you are doing wrong is that you change active property and it is reflected for all elements.

The solution is to assign active property for every object and use v-show directive.

 <p v-show="elem.active" v-bind:id="elem.id">show {{push}}</p>

working fiddle.

var app = new Vue({
   el: '#app',
   data: {
     inputProject: [],
     counter:0
   },
   methods: {
      addInput: function() {
        this.inputProject.push({id:this.counter,active:false});
        console.log(this.inputProject);
        this.counter++
      },
      removeInput: function(index) {
        this.inputProject.splice(index,1);
      },
      toggle: function (index) {
        var item= this.inputProject.filter(a=>a.id==index)[0];
        item.active=!item.active;
      }
   }
})

Upvotes: 2

Related Questions