Question

我已经坚持了好一阵子了，我不确定Google可以通过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中，我想显示通过genre_id链接到声音包的流派名称。我不知道如何获取此标签值以在此v-for中显示，我希望任何人都可以向我提供良好指导。我是Vue的新手，这就是为什么我要问什么看起来很简单的问题。

感谢您的帮助。

谢谢！

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

请告知这是否对您有用。

Answer 2

<li v-for="soundpack in soundpacks" :key="soundpack.teacher_id">
   {{genres[soundpack.genre_id - 1].label}} 
</li>

请注意，-1是因为您从1开始建立索引，而数组的索引从0开始，另外请注意，我的代码仅在您继续对类型进行恒定编号时才有效。

Answer 3

这里有很多选项。

只需使用模板，您就可以使用嵌套循环来实现：

<div v-for="pack in soundpacks">
    {{ pack.title }} -
    <template v-for="genre in genres">
        <template v-if="genre.id === pack.genre_id">
            {{ genre.label }}
        </template>
    </template>
</div>

或者，您可以使用计算属性将流派标签添加到声音数据中：

computed: {
    extendedSoundpacks () {
        return this.soundpacks.map(pack => {
            const genre = this.genres.find(genre => genre.id === pack.genre_id)

            return {
                // Copy the original object to avoid mutating it.
                // Alternatively you could just nest the object by
                // removing the three dots, though this would be at
                // the expense of a more complicated template.
                ...pack,
                label: genre.label
            }
        })
    }
}

虽然这比模板中的循环稍好，但仍使用嵌套循环。最好是准备一张地图，以便从id快速查找标签：

computed: {
    genreMap () {
        const genreMap = {}

        this.genres.forEach(genre => {
            // If genres have more than just a label you could store
            // the whole object instead of just the label
            genreMap[genre.id] = genre.label
        })

        return genreMap
    }
}

现在我们有了genreMap，在我先前的find示例中，extendedSoundpacks变成了：

const genre = this.genreMap[pack.genre_id]

虽然代码不是很短，但是它确实避免了嵌套循环，如果数组足够大，嵌套循环会更快。

但是，一旦有了genreMap，在模板中执行此操作而无需创建新的声音包阵列将变得非常简单：

{{ genreMap[pack.genre_id] }}

在这种情况下就足够了，但是如果逻辑比简单的id / label查找更复杂，则可以使用方法...

{{ getGenreLabel(pack.genre_id) }}

...或过滤器：

{{ pack.genre_id | genreLabel }}

这些分别需要在组件的methods或filters部分中定义为函数。如果您需要在多个组件之间使用此逻辑，则可以考虑全局注册过滤器。

Vue.Js如何获取ID为

3 个答案: