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，该div基于顶部的选择选项进行排序。

Answer 1

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

以下是步骤：

创建一个数据属性以存储过滤器值（来自<select>）
- filter-（字符串）选定的过滤器

创建一个filter-分类功能字典。我们将使用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,
};

使用基于所选{{1}的排序函数，创建一个slice s this.products（创建副本）并sort s结果的计算属性}。
```
filter
```
更改模板，以使computed: { filteredProducts() { return this.products.slice().sort(sorters[this.filter]); } }迭代此计算出的属性：
```
v-for
```

demo

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

1 个答案: