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>

工作小提琴。

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