對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?...