按百分比值对 nuxt 中的 json 进行排序

Question

所以，我从本地 json（稍后会有新条目）创建了这个条形图。到目前为止，一切都很好。问题是我无法将排名从最高到最低百分比。我尝试了几篇我在这里读到的东西，但什么也没有，无论如何，我并不是真的喜欢 Nuxt。

json

{
  "times": [
    {
      "name": "flamengo",
      "logo": "/img/about-fgf.png",
      "percentage": "100%"
    },
    {
      "name": "Amando",
      "logo": "/img/about-fgf.png",
      "percentage": "18%",
      "letters": "abc"
    },
    {
      "name": "black",
      "logo": "https://cdn.worldvectorlogo.com/logos/clube-regatas-flamengo.svg",
      "percentage": "26%"
    }
  ]
}

html

<template lang="html">

  <div class="carrousel-torcedometro">
  <VueSlickCarousel class="container__boxRanking"  v-bind="slickOptionsDefault">
    <div class="boxRanking" v-for="time in times" :key="time.name">
      <div class="barra-total">
        <div class="boxRanking--logo">
          <img :src="(time.logo)"  />
        </div>
        <div class="barra-quantidade" :style="{ height: time.percentage  }" >
        </div>
      </div>
      <div class="boxInfo">
        <div class="boxRanking--percent">
          <h1>{{ time.percentage }}</h1>
        </div>
        <div class="boxRanking--text">
        </div>
      </div>

    </div>
  </VueSlickCarousel>
  </div>

</template>

<script>
import json from '@/static/fake-data.json'
import VueSlickCarousel from 'vue-slick-carousel'


export default  {


  nameTimes: "times",
  data: function() {
    return {
      times: json.times,


      slickOptions: {
        slidesToShow: 1,
        arrows: false,
        dots: true,
        autoplay:true,
        autoplaySpeed: 5000,
        cssEase: 'ease',
        dotsClass: "slick-dots dots-pagination"
      },
      all:{
        data: {
          live:[],
          next:[],
          last:[]
        }
      },
      slickOptionsDefault: {
        arrows: true,
        dots: false,
        slidesToShow: 10,
        infinite: false,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 1,
              variableWidth:false,
            }
          },
          {
            breakpoint: 500,
            settings: {
              slidesToShow: 5,
              variableWidth:false,
            }
          },
        ]
      },
      disclamer: null
    };
  },

  computed: {
    times: function () {
      return this.percentage.filter(function (number) {
        return number % 2 === 0
      })
    }
  },

  mounted: function() {
    // Checking if everything works, delete this right after you see that everything works
    console.log(this.times);
  },


  components: {
    VueSlickCarousel,
  }

}
</script>

<style>
  .carrousel-torcedometro > .slick-slide {
    padding: 10px;
  }
  .container__boxRanking {
    padding: 0;
    height: 400px;

  }

  .container__boxRanking > div > div > div {
    padding: 15px;
  }

  .container__boxRanking > div,
  .container__boxRanking > div > div,
  .container__boxRanking > div > div > div,
  .container__boxRanking > div > div > div > div {
    height: inherit;

  }

  .container__boxRanking > div > div > div > div {
    display: flex;
    align-items: flex-end;
  }
  .boxRanking {
    height: 100%;
    border-radius: 5px;
    display: flex!important;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    transform-origin: center top;

    transition: ease-in-out 200ms;

  }

  .boxRanking--logo {
    height: 15%;
    width:100% ;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out 600ms;

  }
  .boxRanking--logo img{
    max-width: 50%;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .barra-total {
    height: 90%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
  }
  .barra-quantidade {
    max-height: 85%;
    width: 100%;
    border-radius: 5px;
    display: flex;
    background: linear-gradient(20deg, #11998e 0%, #38ef7d 100%);

  }



  .boxInfo {
    height: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .boxRanking--percent{
    width: 100%;
    text-align: center;
  }
  .boxRanking--percent h1{
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    color: #232323;
  }




</style>

Answer 1

<div class="boxRanking" v-for="time in timeSorted" :key="time.name">

computed: {
  timeSorted() {
    return this.times.sort((a,b) => {
      const aPercentage = +(a.percentage.split('%')[0])
      const bPercentage = +(b.percentage.split('%')[0])
      return bPercentage - aPercentage
    })
  }
}