javascript - Vue.Js如何使用id获取prop属性的值

Question

我已经被困在这个问题上有一段时间了，我不知道如何通过 Google 找到解决方案并通过 vuejs 文档，但找不到任何有用的东西。

基本上我有一个带有一些 Prop 的应用程序。其中之一是“声音包”。这个 prop 在我的 app.js 中是这样设置的:

soundpacks: [
    { 
        title: 'Techno soundpack',
        tempo: 130,
        genre_id: 1,
        teacher_id: 1
    },
    { 
        title: 'Deep House soundpack',
        tempo: 123,
        genre_id: 2,
        teacher_id: 2
    }
]

正如你所看到的，我在这里声明了一个genre_id。我有另一个这样声明的 Prop :

genres: [
    {
        id: 1,
        label: 'Techno'
    }, 
    {
        id: 2,
        label: 'Deep House'
    }
]

我的问题如下。在我的首页上，我想在 div 中显示所有声音包，这是我使用 v-for 实现的。这是可行的，但在这个 div 中我想显示通过genre_id 链接到声音包的流派名称。我不知道如何让这个标签值显示在这个 v-for 中，我希望任何人都能给我一个好的方向插入。我是 Vue.Js 的新手，这就是为什么我要问一个看起来非常简单的问题。

感谢任何帮助。

谢谢!

Answer 1

我刚刚编写了一个计算属性，您可以将其添加到组件中。将计算一个新列表，您可以直接使用该列表在您的应用中显示。

computed: {
    computeListData(){
        let newList = []
        this.soundpacks.forEach((item) => {
            let data = this.genres.filter((genre) => {
                return (genre.id === item.genre_id)
            })
            let listData = item
            listData.label = data[0].label
            newList.push(listData)
        })
        return newList
    }
}

这是一个要点链接，您可以引用: https://gist.github.com/ayushgupta11/7eeb1a4fdfeadab1a94a1e592ecd53dd

请告知这是否适合您。