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

1497 查看

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