javascript - 如何显示/隐藏动态数组中的 v-for 元素？

Question

我想在单击相应的 todo 按钮时显示/隐藏框中的每个待办事项详细信息。实际上，todos 和 todoDetails 都是从服务器动态获取的。

脚本类似于 this

var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    seen: false,
    todos: ['eat', 'work'] ,//dynamic array  
    todoDetails: [{'eat': 'some yummy food'}, {'work': 'as hard as you can'}]
  },
  methods: {
    openbox: function() {
      seen = !seen ;
    }
  }
});

模板如下:

<div id="demo" v-cloak>
  <h1>{{title }}</h1>

  <ul>
    <li v-for="todo in todos" @click="openBox">
      <button @click="openbox">{{ todo }}</button>
      <p v-show="seen"> More info: {{todoDetails[todo]}} </p>
    </li>
  </ul>
</div>

但我无法让它工作。我该如何修复它？

Answer 1

我更新你的jsfiddle .

基本问题是:

• @click="openBox" 但函数名称是 @click="openbox"
• seen = !seen ; 添加 this 关键字 this.seen = !this.seen;

模板:

<div id="demo" v-cloak>
  <h1>{{title }}</h1>
  <ul>
    <li v-for="todo in todos" @click="openbox(todo)">
      <button>{{ todo.name }}</button>
      <p v-show="todo.seen"> To do details for {{todoDetails[todo.name]}} </p>
    </li>
  </ul>
</div>

Vue

var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    seen: false,
    todos: [{
      name: 'eat',
      seen: false
    }, {
      name: 'work',
      seen: false
    }], //dynamic array  
    todoDetails: {
      'eat': 'some yummy food',
      'work': 'as hard as you can'
    }
  },
  methods: {
    openbox: function(todo) {
      todo.seen = !todo.seen;
    }
  }
})