How to implement grouped lists in Vue?

How to implement grouped lists in Vue?

Vue, as a popular front-end framework, has good support for data processing and rendering. In actual applications, we often encounter situations where we need to display grouped lists, such as displaying product categories, displaying city lists, etc. So, how to implement grouped lists in Vue? Let’s introduce it in detail below.

1. Data structure design

Before implementing the grouped list, we need to design the data structure first. In the implementation of Vue, we usually use an array to store all data and display it in groups. Specifically, we can use an array of objects to implement grouped lists. Each element in the object array represents a piece of data, and one of the attributes represents the group it belongs to, such as:

const data = [
  { name: '手机', category: '电子产品' },
  { name: '电视', category: '电子产品' },
  { name: '冰箱', category: '家用电器' },
  { name: '洗衣机', category: '家用电器' },
  { name: '自行车', category: '运动健身' },
  { name: '跑步机', category: '运动健身' },
]

In this example, we use the category attribute to represent the group it belongs to. .

2. Grouped data processing

After designing the data structure, we need to group the data for subsequent display. In Vue, we can implement grouping processing through computed computed properties. Specifically, we can define a calculated attribute to classify the data into groups. The code is as follows:

computed: {
  categorizedData() {
    const result = {}
    this.data.forEach(item => {
      if (!result[item.category]) {
        result[item.category] = []
      }
      result[item.category].push(item)
    })
    return result
  }
}

In this example, we define a calculated attribute named categorizedData, which will classify the data according to groups and return a list containing all grouped data. object. Among them, we use an empty object result to store the classified data, traverse all the data, and add each data to the group to which it belongs.

3. Group list rendering

After the data processing is completed, we need to render the grouped data onto the page. In Vue, we can use the v-for directive to implement list rendering. Specifically, we can nest two levels of v-for instructions in the template to traverse the grouped data and render it on the page. The code is as follows:

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>

In this example, we use v-for in the outer layer to traverse grouped data, where (items, category) in categorizedData represents traversing objects Each attribute and attribute value in . The inner v-for is used to traverse the data of each group and render it into a sublist. In this way, we can display grouped data on the page according to categories.

The complete code is as follows:

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { name: '手机', category: '电子产品' },
        { name: '电视', category: '电子产品' },
        { name: '冰箱', category: '家用电器' },
        { name: '洗衣机', category: '家用电器' },
        { name: '自行车', category: '运动健身' },
        { name: '跑步机', category: '运动健身' },
      ],
    }
  },
  computed: {
    categorizedData() {
      const result = {}
      this.data.forEach(item => {
        if (!result[item.category]) {
          result[item.category] = []
        }
        result[item.category].push(item)
      })
      return result
    },
  },
}
</script>

Through the above code, we can implement the grouped list in Vue and display the data on the page according to the grouping.

The above is the detailed content of How to implement grouped lists in Vue?. For more information, please follow other related articles on the PHP Chinese website!