• notice
  • Congratulations on the launch of the Sought Tech site

vue.js v-for group rendering

I want to implement a list of mobile phone contacts. And group by initial letter. How to use v-for in vue to render?

HTML template

<li v-for="(item,index) in carbrands">
 <h2 class="list-title" v-show="" >{{item.LETTER}} {{index}}</h2>
 <ul class="list-content">
   <li class="list-car-item" @click="typeShow"><img :src="item.IMAGE" alt=""><span>{{item.NAME}}</span></li>
 </ul></li>

data

clipboard.png

The effect you want to achieve through the LETTER in the data

clipboard.png

I am a rookie, please advise.


Vue 1.0 directly uses OrderBy to sort the first letter

<v-for="(item,index) in carbrands | orderBy'LETTER'">
// The first in the array displays LETTER and Letter in the current array element! = Letter in the previous array element is displayed.
v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER"

Vue 2.0 uses calculated properties

<v-for="(item,index) in carbrands">
v-show="index === 0 || item.LETTER !== carbrands[index-1].LETTER"
computed: {
  carbrands: function () {
    return _.orderBy(this.carbrands,'LETTER');
  }
}

Warm suggestion: When asking questions, directly post the code to facilitate others to copy and paste and modify, it is very inconvenient for you to post pictures


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

buy atorvastatin 80mg online cheap & lt;a href="https://lipiws.top/"& gt;cost lipitor 80mg& lt;/a& gt; buy atorvastatin 80mg online

Cleeav

2024-03-08

Leave a Reply

+