Vue.js 沒有按數字排列元素？

Question

所以我嘗試讓 Vue.js 使用“sortBy”以數字方式排列元素。 顯然，我失敗了。 我搜索了 web 但沒有得到滿意的結果，所以有人可以幫助我嗎？

HTML（不是全部，只是 Vue.js 呈現的表格）

<table class="ui celled table">
                <thead>
                    <tr>
                        
                        <th @click="sortBy='name'">Name</th>
                                <th @click="sortBy='cal'">Caliber</th>
                                <th @click="sortBy='r'">Range (max-min)(studs)</th>
                                <th @click="sortBy='dmg'">Damage</th>
                                <th @click="sortBy='cap'">Capacity</th>
                                <th @click="sortBy='rpm'">Rate of Fire</th>
                                <th @click="sortBy='multi'">Damage Multiplier (Head/Torso)</th>
                                <th @click="sortBy='desc'">Description</th>
                                <th @click="sortBy='rank'">Rank Unlock</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="list in lists">
                        
                        <td>{{list.name}}</td>
                                <td>{{list.cal}}</td>
                                <td>{{list.r}}</td>
                                <td>{{list.dmg}}</td>
                                <td>{{list.cap}}</td>
                                <td>{{list.rpm}}</td>
                                <td>{{list.multi}}</td>
                                <td>{{list.desc}}</td>
                                <td>{{list.rank}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="100%">{{sortedlists.length}} guns</th>
                    </tr>
                </tfoot>
            </table>

JS

new Vue({
          el: "#main",
          data: {
            lists: [
                     {
                "name": "M9",
                "cal": "9×19mm",
                "dmg": "35-10",
                "cap": "15+1 / 105",
                "rpm": "780",
                       "multi":"1.50/1.10",
                "desc": "A 9mm Italian pistol. One of the first 'wonder nines'. High capacity with deep reserves, light recoil, and high velocity. ",
              "r": "40-80",
                 "rank": "0"
                 
              },
              {
                "name": "GLOCK 17 (G17)",
                "cal": "9×19mm",
                "dmg": "34-10",
                "cap": "17+1/102",
                "rpm": "780",
                "r":"40-90",
                "multi":"1.50/1.10",
                "desc": "A 9mm Austrian pistol renowned for its simplicity and ruggedness. Compared to the M9, it has a higher capacity, but less muzzle velocity.",
            "rank": "1"
              },
              {
                "name": "M1911",
                "cal": ".45 ACP",
                "dmg": "48-29",
                "cap": "8+1/56",
                "rpm": "720",
            "r":"55-90",
            "multi":"1.40/1.15",
                "desc": "A classic American pistol brought into the modern age. Very high damage up close, with poor velocity and small magazine size.",
            "rank": "2"
              },
              {
                "name": "DESERT EAGLE (DEAGLE) L5",
                "cal": ".44 MAGNUM",
                "dmg": "56-32",
                "cap": "8+1/40",
                "rpm": "400",
                "r":"50-80",
                "multi":"2.00/  1.30",
                "desc": "A modern version of the iconic Israeli-American pistol. This specific model has been lightened as well as upgraded with dual Picatinny rails and a much-needed muzzle brake. Very high damage with the capacity to instantly kill to the head up close, with rough recoil.",
                "rank": "3"
              },
               {
                "name": "M45A1",
                "cal": ".45 ACP",
                "dmg": "45-28",
                "cap": "10+1/60",
                "rpm": "670",
                 "r":"50-95",
                 "multi":"1.40/1.15",
                "desc": "A modern American pistol with many custom parts. High damage, medium capacity, strong recoil.",
                 "rank": "4"
              },
                
                {
                "name": "FIVE SEVEN",
                "cal": "5.7×28mm",
                "dmg": "29-22",
                "cap": "20+1/100",
                "rpm": "800",
                  "r":"80-120",
                  "multi":"1.40/1.20",
                "desc": "A modern Belgian pistol firing a unique caliber. Poor close-in performance, with great ranged performance, high velocity, large magazine, wall penetration and deep reserves.",
                  "rank": "5"
              },
               {
                "name": "ZIP 22",
                "cal": ".22 LONG RIFLE",
                "dmg": "15-12",
                "cap": "10+1/180",
                "rpm": "1000 SEMI",
                 "r":"30-60",
                 "multi":"2.80/1.00",
                "desc": "A modern American 'pistol' with questionable quality. Abysmal damage, but with deep reserves and a high headshot multiplier. A weapon so bad it killed a million dollar company. 3 shots to the head at all ranges.",
                 "rank": "6"
              },
                        .
                        .
                        .
                        .
                        etc all the way to "rank": "100"
              {
                "name": "MG42**",
                "cal": "7.62 NATO",
                "dmg": "36-20",
                "cap": "50/250",
                      "rpm": "1200 AUTO",
                "multi":"1.40/1.00",
                "desc": "The original, the iconic, the feared... The buzzsaw of the axis powers during the second world war, back to prove it’s worth in the modern warzone. Fires extremely fast and hits even harder, but is slow and inaccurate.",
                "rank": "100"
              },
                
              
            ],
            sortBy: "rank",
            filterByName: "",
            
            counter: 0
          },
          
          computed: {
            sortedlists() {
              return this.lists.filter(
                list => list.name.includes(this.filterByName)
              ).sort(
                (a, b) => a[this.sortBy].localeCompare(b[this.sortBy])
              );
            }
          }
        });

編輯：我沒有包括整個 javascript 所以我想我不妨更新問題以使其更清楚。 正如我所說，`

computed: 

    {
            sortedlists() {
              return this.lists.filter(
                list => list.name.includes(this.filterByName)
              ).sort(
                (a, b) => a[this.sortBy].localeCompare(b[this.sortBy])
              );
            }`

不按數字順序排列元素。

等一直到“排名”：“100”。 Vue 以 0,1,10,100,11,2,20,21........29,3,30,31,32,33,......39,4 的方式排列元素， 40,....48,49 等

你明白了。 它似乎並沒有安排我想要的 1,2,3,4,5,6,7,8,9,10,11,12 等元素。 有什么有用的答案嗎？

Answer 1

您需要按rank為數字而不是字符串。 你得到的字母順序是准確的： 1,10,100,11,2,20,21 。

const sortedList = lists.splice().sort((x1, x2) => (parseInt(x1.rank) - parseInt(x2.rank)))

Answer 2

Ahhhh 似乎我在認真修改了代碼后找到了答案。
我將其更改為以下內容：

computed: {
    sortedlists() {
      return this.lists.filter(
        list => list.name.includes(this.filterByName)
      ).sort(
        (a, b) => a[this.sortBy] - b[this.sortBy]
      );
    }
  }