Vue.js 在输入值后重新排序

Posted 2023-02-16

【中文标题】Vue.js 在输入值后重新排序

【英文标题】：Vue.js re-sort after input value

【发布时间】：2021-07-18 17:20:56

【问题描述】：

我有一个按计算属性（按价格）排序的 html 表格。

我的 HTML：

<input v-model="inputNumber" type="number">
<table>
                <thead>
                  <tr>
                    <th>Fruit</th>
                    <th>Price</th>
                    <th>Final price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="fruit in orderFruits">
                    <td> fruit.name </td>
                    <td> fruit.price </td>
                    <td v-if="!input"> fruit.price </td>
                    <td v-else> fruit.price * inputNumber </td>
                  </tr>
                </tbody>
</table>

我的 JS：

let app = new Vue(
  el: "#app",

  data: 
    fruits: ["name": "apple", "price": 5, "name": "banana", "price": 6,"name": "orange", "price": 7],
    inputNumber: null
  ,

  computed: 
    orderFruits: function () 
      function compare(a, b) 
        return (a.price - b.price);
      
      return this.fruits.slice().sort(compare);
    ,
...

输入值后如何重新排序列表？

提前谢谢你！

【参考方案1】：

您的比较器应考虑inputNumber，以便对该属性的更改会自动重新计算orderFruits。还要确保使用arrow function 为compare() 来捕获其中的组件上下文：

  computed: 
    orderFruits: function () 
      const compare = (a, b) => 
        return this.inputNumber
          ? (a.price * this.inputNumber - b.price * this.inputNumber)
          : (a.price - b.price);
      
      return this.fruits.slice().sort(compare);
    ,
  

demo