ダイナミックアレイのv-for要素を表示/非表示にするにはどうすればよいですか？

Question

対応するtodoボタンをクリックすると、それぞれの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; 
    } 
    } 
})