对vue的 v-for 循环中添加属性的方法的研究

1. 刚开始写代码如下：（运行：http://jsbin.com/qonoliy/2/ed...）

   <div id="test">
     <div class="item" v-for="item in items" @click="toggle(item)" >
       <div>{{item.name}}</div>
       <div v-show="item.show">
         初始隐藏
       </div>
     </div>
   </div>
   <script>
   new Vue({
     el: '#test',
     data: {
       items: [{
         name: 'a',
         show: false
       }, {
         name: 'b',
         show: false
       }, {
         name: 'c',
         show: false
       }]
     },
     methods: {
       toggle: function(item) {
         item.show = !item.show;
       }
     }
   });
   </script>

2. 由于data.items是后端传过来的，没有show这个字段, 无奈只好把 data.items 遍历添加 show 属性。（运行：http://jsbin.com/qonoliy/4/ed...）

   var data =  [{
     name: 'a',
   }, {
     name: 'b',
   }, {
     name: 'c',
   }];
   data.map(function(item){
     item.show = false;
   });
   new Vue({
     el: '#test',
     data: {
       items: data
     },
     methods: {
       toggle: function(item) {
         item.show = !item.show;
       }
     }
   });

3. 对服务端数据进行遍历处理还是不太优雅，如果能够在v-for 循环中给 item 添加 show 属性就好了。
   但是似乎不行。(运行：http://jsbin.com/qonoliy/5/ed...

4. @vingojw 提供了在触发 toggle 事件是添加属性的方法 （运行：http://jsbin.com/qonoliy/6/ed...）

   toggle: function(item) {
     Vue.set(item, 'show', this.show = !this.show);
   }

5. @X-Ray 提出了一个个写法（运行：http://jsbin.com/qonoliy/7/ed...）

   toggle: function($index) {
     var item = this.items[$index];
     var state = item.show;
     var obj = $.extend(true, {}, item);
     obj.show = !state;
     this.items.$set($index, obj);
   }

6. 想起了 angluar 有个 ng-init 似乎可以做此事，vue 暂时没有 v-init 指令，那就自定义一个 v-init 指令
   http://jsbin.com/qonoliy/8/ed...

7. angluar 使用 v-init 实现
   http://jsbin.com/finayi/edit?...