Vue.Js如何獲取具有ID的prop屬性的值

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 ，在我之前的extendedSoundpacks示例中的find就變成了：

const genre = this.genreMap[pack.genre_id]

盡管代碼不是很短，但它確實避免了嵌套循環，如果數組足夠大，嵌套循環會更快。

但是，一旦有了genreMap ，就可以在模板中執行此操作而無需創建新的聲音包數組，這變得非常簡單：

{{ genreMap[pack.genre_id] }}

在這種情況下就足夠了，但是如果邏輯比簡單的id / label查找更復雜，則可以使用一種方法...

{{ getGenreLabel(pack.genre_id) }}

...或過濾器：

{{ pack.genre_id | genreLabel }}

這些將需要分別在組件的methods或filters部分中定義為函數。 如果需要在多個組件之間使用此邏輯，則可以考慮全局注冊過濾器。