在 Vue 中显示动态排序的 div/数据

Question

我正在尝试弄清楚如何创建一个下拉菜单，对填充了不同数据（interestRates、loanAmounts）的动态渲染（通过 for 循环）div 进行排序

<div class="sortedByDiv">sorted by 
  <select class="sortingFont"> 
    <option>Monthly Cost</option>
    <option>Interest Rate</option>
    <option>Loan Amount</option>
  </select>
</div>

理想情况下，点击上述下拉菜单中的选择选项将“触发”呈现排序数据的方法。我目前向查看者显示未排序数据的代码如下所示：

<div class="wrapper1" v-for="product in products">
  <div class="logoDiv"><img :src="product.logo"/>
    {{product.interestRate.ir}}
    {{product.amount | currency}}
  </div>
</div>

我做了一些计算方法来进行下面的排序：

computed: {

sortedProductsInterestRate: function() {
  var interestArr = new Array
  for (let item1 of this.products) {
    if (item1.interestRate.ir != null) {  
      interestArr.push(item1.interestRate.ir)
      interestArr.sort((a, b) => a - b)
    }
  }
  return interestArr
},
# also have same concept for {{product.amount}}

我的主要问题是我不知道如何更改通过 for 循环在 div 中呈现产品的位。我想更改它以显示“新”div，根据顶部的选择选项进行排序。

Answer 1

一种解决方案是将v-model 和<select> 的值设置为filteredProducts computed property 用来计算要显示的products 的本地数据属性（例如，名为filter）。请注意，当 Vue 检测到其任何依赖项（使用的任何数据属性）发生变化时，它会自动重新评估计算属性。

步骤如下：

1. 创建一个数据属性来存储过滤值（来自<select>）

   • filter - （字符串）选择的过滤器

2. 创建filter-to-sorter-function 的字典。我们将使用filter 数据属性来查找this.allProducts.sort() 的排序器。

   const sorters = {
     monthlyCost: (a,b) => a.monthlyCost - b.monthlyCost,
     interestRate: (a,b) => a.interestRate.ir - b.interestRate.ir,
     loanAmount: (a,b) => a.amount - b.amount,
   };
   

3. 使用基于所选filter 的排序函数创建一个计算属性，该属性slices this.products（创建副本）和sorts 结果。

   computed: {
     filteredProducts() {
       return this.products.slice().sort(sorters[this.filter]);
     }
   }
   

4. 更改模板以便v-for 迭代此计算属性：

   <div v-for="product in filteredProducts">
   

demo