Vue -v 在选择标签中建模对象

Question

我有一个选择标签，它显示一个对象数组作为它的选项。在该选项中，我只显示每个对象的名称属性。我在选择标签上有一个 v-model，它默认为对象的 name 属性之一。我的目标是在观察者函数中使用所选选项的 id。下面是一些伪代码：

<template>
    <div>
        <select v-model="selectedGame">
            <option v-for="(game,index) in selectedGames" :key="index + 'game'">{{ game.name}} </option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedGames: [
                {id: 1, name: "ABC"},
                {id: 2, name: "DEF"},
                {id: 3, name: "GHI"},
                {id: 4, name: "ABC"},
            ],
            selectedGame: "ABC"
        }
    },
    watch: {
        async selectedGame() {
            // I want make an async call using the id of the selected game
        }
    }
}
</script>

我认为可以正常工作的一个解决方案是使用 selectedGame 的值搜索数组（var 被 v 建模）。当我有两个具有相同名称属性的对象（ID 1 和 4 的 ABC）时，该解决方案就会崩溃。

我希望我可以对数组进行 v-model，然后可以访问观察者中的选定对象，但我很确定 vue 不会那样工作，因为 v-model 必须在 select 上，而不是选项。

任何帮助将不胜感激！提前致谢！

Answer 1

只需将game对象绑定到<option>.value，这样<select>的v-model就可以得到选中游戏的对象值：

<select v-model="selectedGame">
    <option v-for="game in selectedGames" :value="game">{{ game.name }}</option>
</select>

export default {
    data() {
        const selectedGames = [
            {id: 1, name: "ABC"},
            {id: 2, name: "DEF"},
            {id: 3, name: "GHI"},
            {id: 4, name: "ABC"},
        ]
        return {
            selectedGames,
            selectedGame: selectedGames[0]
        }
    },
    watch: {
        async selectedGame(selectedGame) {
            await fetch('/api/select/' + selectedGame.id)
            //...
        }
    }
}

demo