Vuejs 상태 표시/숨기기

Question

동적 항목 추가 및 제거가 작동 중입니다. 나는 각각 아래에 요소를 추가/숨기고 싶다. 그러나, 내가 "보여주기/숨기기"할 때 모든 것을 토글합니다. (? 방법 토글) 어떻게 여기

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는 현재 인덱스를 호출 할 수 있습니다 https://jsfiddle.net/rhgz83e2/30/

Answer 1

당신이 잘못하고있는 것은 당신이 active 속성을 변경하는 것이이며 모든 reflected입니다 집단.

해결책은 모든 개체에 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; 
     } 
    } 
})