Does vue implement data docking similar to alphabetically sorted address books?

as shown in the following figure, you need to achieve this effect:

clipboard.png

:

clipboard.png


?,:

HTML:


clipboard.png

js:

clipboard.png

clipboard.png

I would like to ask if the gods have any more efficient methods?

Mar.19,2021

ask the backend to group data when collecting data. I had the same need as you at that time. But I am writing background


really 0-0 I didn't take a close look at your html logic, it's too much, and it's repetitive and unsolvable.
first of all, I usually use ul li nesting to write your 0-0,
if you abstract your html, into js logic, you will feel much more refreshed.
first of all, the data has been obtained. It is cyclically grouped according to 26 letters 0-0
data= [
{title:a,arr: [{}]},
{title:b,arr: [{}]},
{title:c,arr: [{}]}
]
at this time, it is judged that the data whose arr attribute is empty is deleted, and the data that is not empty is added in the first place with the title
Meizi. Completed


    < li vMelfort = "(list,index) in data" >
    < p vmurfort = "(item,index) in data.arr" class= "arr.isTitle?'title':'itemLi'" >




vegetable chicken, please don't spray

Menu