时间戳

首页 > 解决方案 > Vue.Js如何使用id获取prop属性的值

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

问题描述

我已经坚持了一段时间了，我不确定谷歌如何找到解决方案并通过 vuejs 文档但找不到任何有用的东西。

基本上我有一个带有一些道具的应用程序。其中之一是“声音包”。这个道具在我的 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。我有另一个这样声明的道具：

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

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

任何帮助表示赞赏。

谢谢！

标签： javascriptvue.jsrelationship

解决方案

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

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

请告诉这是否对您有用。

推荐阅读