城市数据处理

<template>
  <div class="home">
    <div class="top"></div>
    <van-index-bar v-for="(item,index) in allData" :key="index">
      <!-- <van-index-anchor v-for="(item,index) in allData" :key="index" index="A" /> -->
        <van-cell v-for="(item1,index1) in item" :key="index1" :title="item1.name" />
    </van-index-bar>
  </div>
</template>

<script>
import {pinyin} from '../../node_modules/js-pinyin/index'
export default {
  name: 'Home',
  components: {
  },
  data(){
      return{
        allData:[],
        FristPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
      }
  },
  mounted(){
    this.get_data()
  },
  methods:{
    get_data(params) {
      let pinyin = require('js-pinyin');
      pinyin.setOptions({checkPolyphone: false, charCase: 0});
      return new Promise((resolve, reject) => {
        this.$axios({
          type: "get",
          url: "http://120.79.162.149:3000/top/artists?limit=100",
        }).then(res => {
          res.data.artists.map(item=>{
            item.firstCode  =  pinyin.getCamelChars(item.name).substring(0, 1);
          })
          let cityJson = {}
          var that = this
          for (let i = 0; i < this.FristPin.length; i++) {    
            cityJson[this.FristPin[i]] = res.data.artists.filter(function (value) {
                return value.firstCode === that.FristPin[i];
            })
            this.allData.push(cityJson[this.FristPin[i]])
          }
          console.log(this.allData)
        }).catch(error=>{
          reject(error)
        });
      }); 
    },
  }
}
</script>
<style lang="scss">
.home {
  .top{
    width: 100%;
    height: 150px;
    background: #f5f5f5;
  }
}


</style>