Javascript Vuetify选择默认值

有人知道如何将Vuetify的select默认设置为列表中的第一项吗？这是我的密码：

<v-select
:items="props.item.games"
item-text="team_name"
></v-select>

我只想选择显示数组中第一个项目的团队名称作为默认值

非常感谢您的任何帮助

这就是目前的情况

这就是我想要的样子

更新：

<v-data-table
    :headers="headers"
    :items="users"
    hide-actions
    class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td class="">
            <router-link class="pink-text" :to="{ name: 'EditUser', params: {id: props.item.id} }" title="Click to edit">
                {{ props.item.email }}
            </router-link>
        </td>
        <td class="">
            <span v-for="(role, index) in props.item.roles" :key="index">
                <span v-if="index != 0">, </span><span>{{ role }}</span>
            </span>
        </td>
        <td class="img-cell"><div v-if="props.item.url" class="img-container"><img class="avatar" v-bind:src="props.item.url"></div></td>
        <td class="">
            <v-select
            :items="props.item.games"
            item-text="team_name"
            ></v-select>
        </td>
        <td class="action">
            <span class="btn-floating btn-small pink">
                <router-link :to="{ name: 'EditUser', params: {id: props.item.id} }">
                <i class="material-icons edit">edit</i>
                </router-link>
            </span>
        </td>
    </template>
</v-data-table>

---

以下是您如何处理不断变化的数据：

常量模拟API==>{ 让随机数据=[ [‘红色’、‘绿色’、‘蓝色’]， [‘橙色’、‘紫色’、‘粉色’]， [‘火鸡’、‘火腿’、‘鸡肉’]， [‘你好’、‘旧世界’、‘世界’]， ['thanos'、'did'、'nothing'、'error'] ]; 返回新的PromiseSolve，拒绝=>{ 设置超时=>{ 决定 randomData[Math.floorMath.random*randomData.length] ; }, 30; }; }; 新Vue{ el:“应用程序”， 数据：=>{ 项目：[]， 挑选出来的： }, 创造{ simulateApi.thendata=>{ 此.selected=数据[0]； 此项=数据； }; } };

---

使v型模型等于default@DerekPollard该数组是数据库中的动态数组，因此我不知道第一项是什么。因此，无论从何处获取数据，请将最大值设置为default@DerekPollard你能根据我上面提供的信息进行演示吗？我从用户数据中什么也得不到，即使在控制台中，loguserData仍然作为undefined@Jason-尝试使用map而不是foreach，而且，我将我的原始版本改为使用created而不是Mounted我们肯定越来越近了。这对用户数组有效，但我的问题是用户数组中的游戏数组。我正在与您的解决方案一起努力，使其发挥作用。我认为添加一个方法或计算属性可能会很好，我几乎想知道在上面引入一个模型属性是否有效——我将相应地更新我的代码

<v-data-table
    :headers="headers"
    :items="users"
    hide-actions
    class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td class="">
            <router-link class="pink-text" :to="{ name: 'EditUser', params: {id: props.item.id} }" title="Click to edit">
                {{ props.item.email }}
            </router-link>
        </td>
        <td class="">
            <span v-for="(role, index) in props.item.roles" :key="index">
                <span v-if="index != 0">, </span><span>{{ role }}</span>
            </span>
        </td>
        <td class="img-cell"><div v-if="props.item.url" class="img-container"><img class="avatar" v-bind:src="props.item.url"></div></td>
        <td class="">
            <v-select
            :items="props.item.games"
            item-text="team_name"
            ></v-select>
        </td>
        <td class="action">
            <span class="btn-floating btn-small pink">
                <router-link :to="{ name: 'EditUser', params: {id: props.item.id} }">
                <i class="material-icons edit">edit</i>
                </router-link>
            </span>
        </td>
    </template>
</v-data-table>

export default {
    name: 'Teams',
    data() {
        return {
            headers: [
                {
                    text: 'Email',
                    align: 'left',
                    sortable: false,
                    value: 'email',
                    width: '30%'
                },
                { text: 'Roles',  value: 'roles', sortable: false, width: '15%' },
                { text: 'Avatar',  value: 'avatar', sortable: false, width: '15%' },
                { text: 'Games',  value: 'games', sortable: false, width: '25.5%' },
                { text: 'Edit',  value: 'edit', sortable: false, width: '14.5%' }
            ],
            feedback: null,
            users: []
        }
    },
    methods: {

    },
    created(){

        db.collection('users').get().then(users => {
            users.docs.forEach(doc => {
                let data = doc.data()
                data.id = doc.id
                this.users.push(data)
            })
        })
    }

}