条件の表示/非表示

Question

動的項目の追加と削除が機能しています。私はそれぞれの下に要素をさらに表示/非表示したいと思っています。しかし、私が「表示/非表示」すると、すべてをトグルします。 https://jsfiddle.net/rhgz83e2/30/

Answer 1

何が間違ってやっていることは、あなたがactiveプロパティを変更することであり、それはすべてのためreflectedです：どのように私は、現在のインデックス（？トグル方式）ここ

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; 
    } 
    } 
}) 

Jsfiddleのみ呼び出すことができます要素。

解決策は、オブジェクトごとにactiveプロパティを割り当て、v-showディレクティブを使用することです。

<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; 
     } 
    } 
})