vue 预先利用computed属性或者ready筛选数据

Question

以下面的数据为例，想筛选出name数据，但要避免重复，我用computed和ready都失败了，但不清楚是为什么，请大家指点下
http://jsbin.com/hepubaxapu/edit?html,js,output

<script src="http://vuejs.org/js/vue.js"></script><div id="demo">
    <select>
        <option v-for="data in preData">{{data.name}}</option>
    </select>
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 },
      { name: 'Jet Li', power: 7000 }
    ],
    preData:[],
  },
  ready:function(){
    var that = this;
        var tempData = [];
        for(var i = 0; i < this.gridData.length; i++){
           if(tempData.length === 0){
            tempData.push(gridData[i]);
          }
          else
            for(var k = 0; k < tempData.length; k++){
             if(this.gridData[i].name != tempData[k].name){
               tempData.push(gridData[i]);
             }
          }
        }
  },
  computed:{
    preData:{
      get:function(){
        var that = this;
        var tempData = [];
        for(var i = 0; i < this.gridData.length; i++){
           if(tempData.length === 0){
            tempData.push(gridData[i]);
          }
          else
            for(var k = 0; k < tempData.length; k++){
             if(this.gridData[i].name != tempData[k].name){
               tempData.push(gridData[i]);
             }
          }
        }
        return tempData;
      }
    }
  }
});

Answer 1

去重复的两个for语句有问题。这里是我改的：

computed:{
    preData:{
      get:function(){
        var tempData = [];
        
        for(var i = 0; i < this.gridData.length; i++){

          if(tempData.length === 0){
            tempData.push(this.gridData[i]);
          } else {
            if(tempData.filter(function(t) {
              return t.name == this.gridData[i].name;
            }.bind(this)).length === 0)
                  tempData.push(this.gridData[i]);
          }
        }
        return tempData;
      }
    }
  }

另外你的gridData[i]之前要加this。还有ready那个函数就不要了

Answer 2

var demo = new Vue({
  el: '#demo',
  data: {
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 },
      { name: 'Jet Li', power: 7000 }
    ],
    preData:[],
  },
   ready: function() {
      this.list()
   },
   methods: {
      list: function() {
        var tempData = this.preData;
        for(var i = 0; i < this.gridData.length; i++){
          if(tempData.length === 0){
            tempData.push(this.gridData[i]);
          } else {
            if(tempData.filter(function(t) {
              return t.name == this.gridData[i].name;
            }.bind(this)).length === 0)
                  tempData.push(this.gridData[i]);
          }
        }
        return tempData;
      }
   }
});