vue通过computed添加的属性通过方法修改不起作用？

Question

<div id="app">
    <h2>Todos:</h2>
    <ol>
      <li v-for="todo in todosArr">
        <label>
          <input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.show">
          <del v-if="todo.show">
            {{ todo.text }}
          </del>
          <span v-else>
            {{ todo.text }}
          </span>
        </label>
      </li>
    </ol>
  </div>
new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false},
      { text: "Learn Vue", done: false},
      { text: "Play around in JSFiddle", done: true},
      { text: "Build something awesome", done: true}
    ]
  },
  computed: {
    todosArr: function () {
       var arr = [];
       this.todos.forEach(function(item, index) {
          if(index == 0) {
            item.show = true
            arr.push(item)
          }else{
            item.show = false
            arr.push(item)
          }
       })
       return arr
    }
  },
  methods: {
      toggle: function(todo){
        todo.show = !todo.show
    }
  }
})

demo在这：http://jsfiddle.net/9jxyequ4/
通过computed添加的属性show，通过toggle修改show，页面上的v-if却无法判断？

Answer 1

Vue无法检测对象新增属性，所以你要不在定义的时候就定义号

    todos: [
      { text: "Learn JavaScript", done: false,show:fasle},
      { text: "Learn Vue", done: false,show:false},
      { text: "Play around in JSFiddle", done: true,show:false},
      { text: "Build something awesome", done: true,show:false}
    ]

要不就用Vue.set

item.show=true

改成

Vue.set(item,"show",true)

false一样的