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

我试图弄清楚如何创建一个下拉菜单，对充满不同数据（利率、贷款金额）的动态呈现（通过for循环）div进行排序

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

一种解决方案是将

的值转换为本地数据属性（例如，名为

过滤器

），该属性是

过滤器产品

用于计算要显示的

产品。请注意，当Vue检测到其任何依赖项（使用的任何数据属性）发生更改时，它会自动重新计算computed属性

以下是步骤：

创建数据属性以存储筛选器值（从
）


过滤器
-（字符串）所选过滤器

为分拣机功能创建一个过滤器字典。我们将使用
过滤器
数据属性来查找排序器，查找
this.allProducts.sort（）


根据所选的
过滤器
，使用分拣机功能，创建一个计算属性，该属性将s
此.products
（创建副本）并s结果

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


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

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



这里有一个简单的示例：在您的代码示例中，数组allProducts“预加载”了4条fakeData（）。我需要制作一个类似的数组，但我无法硬编码fakeData（）位。。。它来自一个API，并通过此API访问。产品。。。如果是这种情况，我如何将完整的未过滤产品集合作为一个数组@现在只需将
allProducts
重命名为
products
，将
products
重命名为
filteredProducts
。然后，在模板中，将
v-for=“products in products”
更改为
v-for=“product in filteredProducts”
。我已经更新了答案以显示这一点。
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}}

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,
};

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

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