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