Javascript 基于另一个阵列Vuejs筛选阵列_Javascript_Arrays_Vue.js_Vuejs3

Javascript 基于另一个阵列Vuejs筛选阵列

javascript arrays vue.js

Javascript 基于另一个阵列Vuejs筛选阵列,javascript,arrays,vue.js,vuejs3,Javascript,Arrays,Vue.js,Vuejs3,我有两个数组 { "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

我有两个数组

 {
"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
    }
]
}

我有一个使用Vuejs的select下拉列表，其中

products.name

正在渲染

 <select v-model="selectFrequency">
        <option v-for="(level1,index) in dataJson.products"
                v-bind:value="level1.frequency">{{level1.name}}</option>
      </select>

我已经尝试了两天，它给了我一个错误

无法读取未定义的属性“every”

。有人能告诉我哪里做错了吗

您可以使用函数。在下面的例子中，我返回haufigkeit数组的id，它等于乘积的频率

var数据={
“产品”：[
{
“姓名”：“Jivi”，
“提示”：“45-60 IE/kg所有5段\n60 IE 1x/Woche\n30-40 IE 2x/Woche”，
“频率”：[“1”、“2”、“8”]
},
{
“名称”：“Adynovi”，
“提示”：“40-50 IE/kg 2x/Woche im Abstrand von 3-4 Tagen”，
“频率”：[“2”、“6”、“7”]
},
{
“名称”：“Esperoct”，
“提示”：“\”50磅/公斤\n总共4磅\”\n“，
“频率”：[“7”]
}
],
“haufigkeit”：[
{
“名称”：“1x/Woche”，
“id”：1，
“价值”：52.1428571429
},
{
“名称”：“2x/Woche”，
“价值”：104.2857142857143，
“id”：2
}
]
};
var结果=[]；
函数selectFrequency（）{
data.products.forEach（elem=>{
元素频率forEach（fre=>{
var arr=data.haufigkeit；
if（arr.some（arr=>arr.id==fre））
结果：推送（fre）；
})
});
返回结果；
}
log（selectFrequency（））您可以使用函数。在下面的例子中，我返回haufigkeit数组的id，它等于乘积的频率

var数据={
“产品”：[
{
“姓名”：“Jivi”，
“提示”：“45-60 IE/kg所有5段\n60 IE 1x/Woche\n30-40 IE 2x/Woche”，
“频率”：[“1”、“2”、“8”]
},
{
“名称”：“Adynovi”，
“提示”：“40-50 IE/kg 2x/Woche im Abstrand von 3-4 Tagen”，
“频率”：[“2”、“6”、“7”]
},
{
“名称”：“Esperoct”，
“提示”：“\”50磅/公斤\n总共4磅\”\n“，
“频率”：[“7”]
}
],
“haufigkeit”：[
{
“名称”：“1x/Woche”，
“id”：1，
“价值”：52.1428571429
},
{
“名称”：“2x/Woche”，
“价值”：104.2857142857143，
“id”：2
}
]
};
var结果=[]；
函数selectFrequency（）{
data.products.forEach（elem=>{
元素频率forEach（fre=>{
var arr=data.haufigkeit；
if（arr.some（arr=>arr.id==fre））
结果：推送（fre）；
})
});
返回结果；
}
log（selectFrequency（））编辑：好的，现在我明白了，像这样的东西应该适合你：
如果您选择一个产品，您将看到它显示的任何haufigkeit，其ID包含在所选频率中
<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>



{{level1.name}
Haufigkeit比赛：

{{match.name}

导出默认值{
数据：{
所选频率：[]，
产品：[
{
姓名：“Jivi”，
提示：“45-60 IE/kg所有5段\n60 IE 1x/Woche\n30-40 IE 2x/Woche”，
频率：[1,2,8]
},
{
姓名：“Adynovi”，
提示：“40-50 IE/kg 2x/Woche im Abstrand von 3-4 Tagen”，
频率：[2,6,7]
},
{
名称：“Esperoct”，
提示：“\”50磅/公斤\n总共4磅\”\n“，
频率：[7]
}
],
haufigkeit：[
{
名称：“1x/Woche”，
id:1，
价值：52.1428571429
},
{
名称：“2x/Woche”，
数值：104.2857142857143，
身份证号码：2
}
]
},
计算：{
haufigkeitMatches（）{
返回这个.haufigkeit.filter（x=>this.selectedFrequency.includes（x.id））
}
}
}

注意：对于所有的编辑，我很抱歉，我正在尝试使用stackoverflow编辑器，但是JS fiddle链接是一个有效的解决方案。
编辑：好的，现在我明白了，类似的东西应该适合您：
如果您选择一个产品，您将看到它显示的任何haufigkeit，其ID包含在所选频率中
<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>



{{level1.name}
Haufigkeit比赛：

{{match.name}

导出默认值{
数据：{
所选频率：[]，
产品：[
{
姓名：“Jivi”，
提示：“45-60 IE/kg所有5段\n60 IE 1x/Woche\n30-40 IE 2x/Woche”，
频率：[1,2,8]
},
{
姓名：“Adynovi”，
提示：“40-50 IE/kg 2x/Woche im Abstrand von 3-4 Tagen”，
频率：[2,6,7]
},
{
名称：“Esperoct”，
提示：“\”50磅/公斤\n总共4磅\”\n“，
频率：[7]
}
],
haufigkeit：[
{
名称：“1x/Woche”，
id:1，
价值：52.1428571429
},
{
名称：“2x/Woche”，
数值：104.2857142857143，
身份证号码：2
}
]
},
计算：{
haufigkeitMatches（）{
返回这个.haufigkeit.filter（x=>this.selectedFrequency.includes（x.id））
}
}
}

注意：对于所有的编辑，我很抱歉，我正在尝试使用stackoverflow编辑器，但是JS FIDLE链接是一个有效的解决方案。
haufigkeit.filter（array=>array.every（item…
在haufigkeit.filter函数中，array
是数组中的单个项，因此它是一个具有关键字名称、值和id的对象。通过执行array。每个您都希望数组是数组，但在fa中