Javascript 基于UI选择的Vue映射或筛选数组，

我有数百个类似这样的条目：

{
"product":"Protec",
"type":"Central Opening",
"attribute":"Triple Lock",
"height":"2100",
"width":"1600",
 "price":"3000"
},
{
"product":"Protec",
"type":"Sliding Door",
"attribute":"Single Lock",
"height":"2100",
"width":"1600",
"price":"3000"
},
{
"product":"ForceField",
"type":"Hinge Door",
"attribute":"Triple Lock",
"height":"2300",
"width":"1200",
"price":"100"
},

我的vue组件

var distinct_product = new Vue({
    el: '#distinct',
    data:{
      distinct_product: [],
      all_products: []
    },

我获取它并将其存储在我的vue组件中，然后将其存储在第二个数据中，因此当我将其呈现给ui时，用户只能看到不同的元素

 mounted: async function(){
      fetch("/Data/products.json")
        .then(res => res.json())
        .then(res => { 
          this.all_products = res
          this.distinct_product = res

          var disProduct = [...new Set(this.distinct_product.map(x => x.product))]
          var disType = [...new Set(this.distinct_product.map(x => x.type))]
          var disAttribute = [...new Set(this.distinct_product.map(x => x.attribute))]

          this.distinct_product.productArray = disProduct;
          this.distinct_product.typeArray = disType;
          this.distinct_product.attributeArray = disAttribute;

我的问题是，它还呈现某些产品无法使用的元素

例如，

产品：“窗口”

不能具有

属性：“三重锁”

我想知道是否可以在用户选择产品时过滤/映射all_products数组

我主要研究了计算属性，但我不确定有什么好方法可以做到这一点。这是我第一次尝试web应用程序，我对JS也相当陌生

我的目标是遍历数组，只推包含在UI中选择的产品的对象 atm这是我所尝试的，但运气不好：

此.distinct\u product.product

绑定到UI

for (var i = 0; i < this.all_products.length; i++){
  if (this.all_products[i] === this.distinct_product.product){
    this.product.push(i);
    return this.product;
 }
}

for（var i=0；i

因此，它将遍历

所有产品

以查找包含

此.distinct\u product.product

的对象，其中将包含“Protec”或其他产品

我走错方向了吗？我是否应该后退一步，尝试以不同的方式处理这些数据

---

很抱歉，如果问题结构不好，这是我正在努力学习的一项技能，欢迎批评。

你的思路是正确的。我将分享一个简单的示例，这样您就可以理解并相应地修改代码

var productdata=[
{
“产品”：“Protec”，
“类型”：“中央开口”，
“属性”：“三重锁”，
“高度”：“2100”，
“宽度”：“1600”，
“价格”：“3000”
},
{
“产品”：“Protec”，
“类型”：“滑动门”，
“属性”：“单锁”，
“高度”：“2100”，
“宽度”：“1600”，
“价格”：“3000”
},
{
“产品”：“ForceField”，
“类型”：“铰链门”，
“属性”：“三重锁”，
“高度”：“2300”，
“宽度”：“1200”，
“价格”：“100”
},
];
//setTimeout（函数（）{
独特的产品Vue=新的Vue({
el:'不同'，
数据：{
//选定：{}，
独特的产品：[]，
所有产品：productdata.map（函数（x，索引）{
返回{text:x.product，值：index+1}；
}),
已选择：“0”
},
计算：{
},
挂载：函数（）{
this.all_products.unshift（{text:'请选择一个产品'，值：0}）；
},
方法：{
getDistinctProduct:函数（）{
var self=这个；
self.distinct_products=productdata.filter（函数（x，索引）{
if（x.product==self.all_产品[self.selected].text）{
返回{text:x.product，value:index}；
}
else{return false；}
});
}
}
})；

{{option.text}
可用产品
产品：{{pro.product}}
类型：{{pro.type}
属性：{{pro.attribute}}
高度：{{pro.height}}
宽度：{{pro.width}}
价格：{{pro.price}}