How to implement an infinite list using Vue?

Vue is one of the most popular front-end frameworks currently. Its convenient data binding and flexible componentization ideas are favored by developers. In development, we often encounter scenarios where we need to display infinite lists. This article will introduce how to use Vue to implement infinite lists.

1. Design of data structure

The implementation of infinite lists requires a nested data structure. The most basic data structure is a tree structure. Suppose the data structure we need to display is as follows:

[
    {id: 1, name: '菜单1', parent_id: 0},
    {id: 2, name: '菜单2', parent_id: 0},
    {id: 3, name: '菜单1-1', parent_id: 1},
    {id: 4, name: '菜单1-1-1', parent_id: 3},
    {id: 5, name: '菜单1-2', parent_id: 1},
    {id: 6, name: '菜单2-1', parent_id: 2},
    {id: 7, name: '菜单1-1-1-1', parent_id: 4}
]

Among them, id represents the unique identifier of the node, name represents the node name, and parent_id represents The id of the parent node of the current node. If it is 0, it means it is the root node.

2. Construction of tree diagram

We need to construct the original data into a tree diagram structure to facilitate subsequent traversal and display. You can define a recursive function to add nodes to the corresponding parent nodes in sequence.

function buildTree(list, parentId) {
    let res = []
    for (let i = 0; i < list.length; i++) {
        if (list[i].parent_id === parentId) {
            let children = buildTree(list, list[i].id)
            if (children.length) {
                list[i].children = children
            }
            res.push(list[i])
        }
    }
    return res
}

let treeData = buildTree(list, 0)

3. List display

Vue provides the v-for instruction for loop rendering data. We can use recursive components to achieve smooth infinite list display.

Inside the component, we can define a <template></template> tag, which is used to render the current node and its child nodes. If the current node has child nodes, the child nodes will be rendered recursively. In recursive components, we can use props to pass data.

<template>
    <ul>
        <li v-for="item in list">
            {{item.name}}
            <recursive :list="item.children"></recursive>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'recursive',
    props: {
        list: Array
    }
}
</script>

In the above code, we use the recursive component recursive. When rendering each node in a loop, use the <recursive></recursive> tag to perform operations on the child nodes of the current node. Recursive rendering.

4. Folding and expanding nodes

Infinite lists usually have the function of collapsing and expanding nodes. We need to add the isCollapsed attribute to the component to represent the current node. Whether to collapse and control the display of child nodes based on this attribute.

<template>
    <ul>
        <li v-for="item in list">
            <div @click="isCollapsed = !isCollapsed">{{item.name}}</div>
            <recursive v-show="!isCollapsed" :list="item.children"></recursive>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'recursive',
    props: {
        list: Array
    },
    data() {
        return {
            isCollapsed: true
        }
    }
}
</script>

In the above code, we added a click event on the <div> tag where the node name is located. When clicked, the <code>isCollapsed attribute is inverted and used v-show Controls the display of child nodes.

5. Summary

Through the above examples, we can understand the three main steps to implement infinite lists in Vue: design of data structure, construction of tree diagram and display of list . At the same time, we also introduced how to add the folding and expanding functions of nodes to achieve interactive effects.

The implementation of infinite-level lists is a classic Vue component development case. An in-depth understanding of this case will help improve Vue development skills and levels, and can also provide a useful reference for the design and development of components.