代码之家 › 专栏 › 技术社区 › BaronGrivet

如何在VueJS中使用for循环对属性中的数据进行分组

vue.js

0

BaronGrivet · 技术社区 · 7 年前

我正在尝试解决如何使用VueJS中的for循环将数据分组到两个级别

例如,我有一个VueJS应用程序,其中包含以下数据:

cars: [{
  "make": "Ford",
  "model": "Mustang"
}, {
  "make": "Ford",
  "model": "Thunderbird"
}, {
  "make": "Ford",
  "model": "Fairlane"
}, {
  "make": "Chevrolet",
  "model": "Camaro"
}, {
  "make": "Chevrolet",
  "model": "Chevelle"
}, {
  "make": "Plymouth",
  "model": "Barracuda"
}]

使用for循环在汽车中循环很简单:

<div v-for="car in cars">
  <div>Make: {{ car.make }}</div>
  <div>Model: {{ car.model }}</div>  
</div>

但是如果我想把模型按品牌分组呢?我想要的结果是:

Ford
  Mustang
  Thunderbird
  Fairlane
Chevrolet
  Camaro
  Chevelle
Plymouth
  Barracuda

在VueJS中最好的方法是什么?

4 回复 | 直到 7 年前

1

5

Stephen Thomas 7 年前

computed: {
    makes() {
        const makes = new Set();
        this.cars.forEach(car => makes.add(car.make);
        return Array.from(makes); 
    }
},
methods: {
    models(make) {
        return this.cars
            .filter(car => car.make === make)
            .map(car => car.model);
    }
}

在模板中

<div v-for="(make, index) in makes" :key="index">
    <p>Make: {{ make }}</p>
    <ul>
        <li v-for="(model, innerIndex) in models(make)" :key="innerIndex">
            {{ model }}
        </li>
    </ul>
</div>

2

4

Brian Lee 7 年前

你可以用 reduce

computed: {
  groups () {
    return this.cars.reduce((carry, current) => {
      if (carry.hasOwnProperty(current.make) && Array.isArray(carry[current.make])) {
        carry[current.make].push(current.model)
      } else {
        Object.assign(carry, { [current.make]: [current.model] })
      }
      return carry
    }, {})
  }
}

模板可以循环组,如:

<div v-for="(make, index) in Object.keys(groups)" :key="index">
  <p>Make: {{ make }}</p>
  <ul>
  <li v-for="(model, innerIndex) in groups[make]" :key="innerIndex">
    {{ model }}
  </li>
  </ul>
</div>

3

1

Mengo 7 年前

props: { 
  cars: Array 
},
data() {
  return {
    makes: _.groupBy(this.cars, 'make'); // _.groupBy is a lodash function
  };
},
methods: {
  // some CRUD methods
  add() {},
  update() {},
  delete() {},
  reconstruct() {
    var result = [];
    Object.keys(this.makes).forEach(key => {
      result.push(...this.makes[key]);
    });
    return result;
  }
}

<div v-for="(make, key) in makes" :key="key">
<p>Make: {{ make }}</p>
<ul>
    <li v-for="(car, index) in make" :key="index">
        {{ car.model }}
    </li>
</ul>
</div>

4

0

Boussadjra Brahim 7 年前

你可以利用 computed 属性(运行此代码段以查看):

var app = new Vue({
  el: "#app",
  data: {
      cars : [{
  "make": "Ford",
  "model": "Mustang"
}, {
  "make": "Ford",
  "model": "Thunderbird"
}, {
  "make": "Ford",
  "model": "Fairlane"
}, {
  "make": "Chevrolet",
  "model": "Camaro"
}, {
  "make": "Chevrolet",
  "model": "Chevelle"
}, {
  "make": "Plymouth",
  "model": "Barracuda"
}]
  },
  computed: {
      groupedMakes() {
          var makes={};
          this.cars.forEach((item)=>{
         if(makes[item.make]==undefined){
              makes[item.make]=[];
              makes[item.make].push(item.model)
                }
          else{
            makes[item.make].push(item.model);

            }
           });
         
           return makes;
      }
  }
})

<div id="app">
    <div v-for="(make,index) in groupedMakes">
        <h3>{{index}}</h3>
         <ul>
            <li v-for="model in make">
            {{model}}
            </li>
         </ul> 
    </div>
   
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>