如何使用计算属性和道具过滤对象[VueJS]

Question

首先，感谢您的阅读和帮助。

我有点迷路试图解决这个问题。我目前有两个下拉组件，它们从一个对象中呈现不同的选项。我正在渲染两个下拉框。第二个下拉菜单将取决于第一个下拉菜单的选择。

假设我选择"BMW"在第一个下拉菜单中，它应该只渲染"BMW 320i"

数据对象看起来像这样:

{
"menu":[
{
"id":"bmw",
"name":"BMW"
},
{
"id":"volvo",
"name":"Volvo"
}
],
"cars":[
{
"id":"bmw320",
"name":"BMW 320i"
},
{
"id":"volvoc70",
"name":"Volvo C70"
}
]
}

在我的模板中，我有两个包含下拉菜单的子组件。MenuDropdown包含dataContent.menu包括dataContent.cars内容。

<MenuDropdown :dataContent="dataContent">
<CarDropdown :dataContent="customDataContent">

CarDropdown的选项将根据第一个下拉菜单的选择而改变。因此，我试图通过使用计算属性来实现这一点:

computed: {
customDataContent() {
if (this.dataContent.menu.id === "bmw") {
return this.dataContent.cars.filter(car => {
return car.id === 'bmw320'
})
} else {
return this.dataContent
}
}
}

谢谢你的帮助!

Answer 1

filter方法返回一个数组，用[0]索引它或者使用array .find()代替

与找到

return this.dataContent.cars.find(car => car.id === 'bmw320')

与过滤器

return this.dataContent.cars.filter(car => car.id === 'bmw320')[0]