javascript - 根据另一个数组Vuejs过滤数组
问题描述
我有两个数组
{
"products": [
{
"name": "Jivi",
"Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
"frequency": ["1", "2", "8"]
},
{
"name": "Adynovi",
"Hint": "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
"frequency": ["2", "6", "7"]
},
{
"name": "Esperoct",
"Hint": "\"50 IE/kg \nalle 4 Tage\"\n",
"frequency": ["7"]
}
],
"haufigkeit" : [
{
"name": "1x / Woche",
"id": 1,
"value": 52.1428571429
},
{
"name": "2x / Woche",
"value": 104.2857142857143,
"id": 2
}
]
}
我有一个使用 Vuejsproducts.name
进行渲染的选择下拉菜单。
<select v-model="selectFrequency">
<option v-for="(level1,index) in dataJson.products"
v-bind:value="level1.frequency">{{level1.name}}</option>
</select>
例如,当我选择 时Jivi
,我想比较in和infrequency
中的数字以及它们匹配时,然后显示ofproducts
id
haufigkeit
name
haufigkeit
这是我正在尝试的
computed:{
selectFrequency:function(){
let results= this.haufigkeit.filter(array=>array.every(item => this.products.filter(group=>group.frequency.includes(item))));
}
}
我已经尝试了两天,它给了我一个错误cannot read property 'every' of undefined
。谁能建议我在哪里做错了?
解决方案
编辑:好的,现在我明白了,这样的东西应该适合你:https ://jsfiddle.net/q9grc04s/
如果您选择一个产品,您将看到它显示任何具有包含在所选频率中的 ID 的 aufigkeit。
<template>
<div>
<div>
<select v-model="selectedFrequency">
<option
v-for="(level1, i) in products"
:key="i"
:value="level1.frequency"
>
{{level1.name}}
</option>
</select>
</div>
<div>
<h1>Haufigkeit Matches:</h1>
<ul v-if="haufigkeitMatches">
<li v-for="match in haufigkeitMatches">{{ match.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: {
selectedFrequency: [],
products: [
{
name: "Jivi",
Hint: "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
frequency: [1, 2, 8]
},
{
name: "Adynovi",
Hint: "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
frequency: [2, 6, 7]
},
{
name: "Esperoct",
Hint: "\"50 IE/kg \nalle 4 Tage\"\n",
frequency: [7]
}
],
haufigkeit : [
{
name: "1x / Woche",
id: 1,
value: 52.1428571429
},
{
name: "2x / Woche",
value: 104.2857142857143,
id: 2
}
]
},
computed: {
haufigkeitMatches(){
return this.haufigkeit.filter(x => this.selectedFrequency.includes(x.id))
}
}
}
</script>
注意:对所有的编辑感到抱歉,我正在尝试使用 stackoverflow 编辑器,但 JS fiddle 链接是一个有效的解决方案。
推荐阅读
- javascript - 如何让计数器在 JavaScript 中再次从 0 开始
- javascript - 如何在Angular中设置靠近垫行的滚动位置?
- arrays - 对象作为 React 子对象无效(找到:带键的对象)。如果您打算渲染一组孩子,请改用数组
- c++ - 解析 json 时出现 std::lenght_error
- css - 使用 object-fit:cover 时如何允许 Bootstrap 相对响应的 img 高度?
- android - 运行应用程序时出现颤振闪屏错误
- r - 如何将一个观察分解为几个子观察?
- windows - 如何在后台运行windows powershell脚本
- flutter - Flutter Web 应用程序无法在移动浏览器上运行。如果在移动浏览器上运行颤振代码,如何调试错误?
- javascript - 如何在不呈现子项的组件中呈现子项?