Vue.js 中的多个 .include 计算？

Posted 2023-02-23

【中文标题】Vue.js 中的多个 .include 计算？

【英文标题】：Multiple .includes in Vue.js computed?

【发布时间】：2021-04-09 06:38:13

【问题描述】：

我试图在我的 Vue.js 中计算多个 .includes 和 .filters 过滤器，但无法成功。 html：

<input class="searchbar" v-model="filterByName" placeholder="Search By Name" oninput="handleInput(event)">
<button type="button" class="btn btn-lg btn-primary">Advanced [BETA]</button>

<div class="padded">
  <p>
    All 9mm & 9×19mm are 9×19mm Parabellum unless otherwise stated. All Rate of Fire are SEMI-AUTOMATIC unless otherwise
    stated.
  </p>
  <p>** - Still in testing phase (test place)</p>
</div>

<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, index) in sortedlists" :key="index">

      <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

function handleInput(e) 
  var ss = e.target.selectionStart
  var se = e.target.selectionEnd
  e.target.value = e.target.value.toUpperCase()
  e.target.selectionStart = ss
  e.target.selectionEnd = se


new Vue(
  el: "#main",
  data: 
    heading: "PF Gun List (WIP)",
    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: "0",
      ,
      
        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: "8",
      ,
      
        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: "18",
      ,
      
        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: "34",
      ,

      
        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: "57",
      ,
      
        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: "61",
      ,
      
        name: "DESERT EAGLE (DEAGLE) XIX",
        cal: ".50 ACTION EXPRESS",
        dmg: "72-37",
        cap: "7+1/21",
        rpm: "400",
        r: "40-82",
        multi: "2.50/1.40",
        desc:
          "Finally, a gun that lets you make a statement. This semi-automatic hand cannon is chambered in .50 Action Express. It'll probably pulverize your wrists with its recoil, but hey, you can't argue with the stopping power. And you've got the king of mayhem...",
        rank: "102",
      ,
      
        name: "GLOCK 18 (G18)",
        cal: "9×19mm",
        dmg: "30-20",
        cap: "19+1/57",
        rpm: "1100 AUTO",
        multi: "1.40/1.00",
        r: "20-60",
        desc:
          "A 9mm Austrian machine pistol. Fast fire rate with relatively stable handling characteristics.",
        rank: "17",
      ,
    ],
    sortBy: "rank",
    filterByName: "",
    counter: 0,
  ,

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

所以我试图拥有多个 .includes 和 .filter 过滤器（我想要另一个过滤器，如 list => list.name.includes(this.filterByCal)，并添加另一个输入“v-model='filterByCal'” 叹息 那么有什么有用的答案吗？请？ 最后一个有助于安排，但不是我想要的。所以我真的很想得到帮助！

【参考方案1】：

排序函数错误地假定所有值都是数字：

.sort((a, b) => a[this.sortBy] - b[this.sortBy]) ❌ values are not numbers

这些值实际上是字符串，减去一个字符串会得到NaN，因此排序会中断。

要解决此问题，您可以检查字符串中的数字，然后才使用数值的差值。否则，使用String.prototype.localeCompare 进行比较：

.sort((a, b) => 
  const aVal = a[this.sortBy]
  const bVal = b[this.sortBy]

  // only check difference when values are numbers
  if (/^\d+$/.test(aVal) && /^\d+$/.test(bVal)) 
    return aVal - bVal
   else 
    return aVal.localeCompare(bVal)
  
)

demo