Question

我想根据v-for循环中的“ group”属性对元素进行分组。该数据是从API获取的。我该怎么解决？

这就是我想要的：

这是我的代码：https://jsfiddle.net/dowhiledo/d7gfr1oy/5/

var example1 = new Vue({
  el: '#example',
  data: {
    people: [ // ordered by group
      {        name: 'Mary',        group: 1      },
      {        name: 'John',        group: 1      },
      {        name: 'Peter',       group: 1      },
      {        name: 'Freddie',     group: 2      },
      {        name: 'Paul',        group: 2      },
      {        name: 'Alfred',      group: 5      },
      {        name: 'George',      group: 5      }
    ]
  }
});

li {
  border: 1px solid blue
}

.group {
  border: 4px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>



<div id="example">
  <ul>
    <li v-for="p in people">
      {{ p.group }} - {{ p.name }}
    </li>
  </ul>
</div>

Answer 1

要获得该结果，必须按组进行除法阵列，然后可以根据需要的这些组在html中进行循环。

请尝试以下代码以获得结果：

HTML

<div id="example">
    <template v-for="group in peopleGroup">
       <ul>
           <li v-for=" people in group">
              {{ people.group }} - {{ people.name }}
           </li>
        </ul>
    </template>
</div>

VueJS-脚本

var example1 = new Vue({
  el: '#example',
  data: {
    people: [ // ordered by group
      {        name: 'Mary',        group: 1      },
      {        name: 'John',        group: 1      },
      {        name: 'Peter',       group: 1      },
      {        name: 'Freddie',     group: 2      },
      {        name: 'Paul',        group: 2      },
      {        name: 'Alfred',      group: 5      },
      {        name: 'George',      group: 5      }
    ],
    peopleGroup: {}
  },
  mounted(){
    this.peopleGroup = this.parsePeopleGroup( this.people );
  },
  methods: {
    parsePeopleGroup( arrayPeople ) {
        let newArray = {};
        arrayPeople.map( people => {
        if( !newArray[ people.group ] )
            newArray[people.group] = []

        newArray[people.group].push( people );
      })
      return newArray;
    }
  }
});

代码如下：http://jsfiddle.net/qb9dmhy2/20/

Answer 2

这是计算属性的理想用例。

使用Array.reduce遍历所有数组元素并将它们“累积”到组数组中。

computed: {
groups() {
  return this.people.reduce((groups, item) => {
     const g = item.group
     groups[g] = groups[g] || []
     groups[g].push(item)
     return groups
    }, {})
  }
}

更新/分叉的小提琴中的完整示例：https://jsfiddle.net/9xfpkL0b/

如何根据v-for循环中的数据属性对元素进行分组？

2 个答案: