gpt4 book ai didi

javascript - id 和名称设置为 Vuetify select :items so that you select a name and it sets the id as the value 的 JS 对象数组

转载 作者:行者123 更新时间:2023-11-28 11:30:14 25 4
gpt4 key购买 nike

我有一个带有 id 和名称的对象数组:

Teams [
{ id: 1, name: 'team1' },
{ id:2, name: 'team2' }
]

有没有办法将名称传递给 vuetify select 的项目,以便在选择名称时将对象的 id 设置为 v-model 值?:

<v-select
v-model="???"
:items="???"
label="Teams"
></v-select>

我猜这将在创建的方法中,但不确定从哪里开始。现在,我正在为应用程序初始获取时商店中的团队设置一个空团队数组:

this.teams = this.$store.state.teams.teams

我从 laravel 后端将其作为集合获取,因此我正在考虑将其转换为 id: name 键值对,但这似乎是不必要的。事实上,我只是在资源 Controller 的索引方法中执行最好的 Eloquent 查询:

$teams = Team::all();

return response()->json($teams);

我知道如何使用普通选择来做到这一点,但不确定如何使用 vuetify 的 v-select:

<select id="categories" v-model="selectedValue">
<option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>

最佳答案

请这样做:

<html>

<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
<div id="app">
<v-app>
<v-select v-model="data" :items="items" label="Teams" item-text="name"
item-value="id"></v-select>

<div>
{{data}}
</div>
</v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
vue = new Vue({
el: '#app',
data: () => ({
data: "",
items: [{
id: 1,
name: 'one'
},
{
id: 2,
name: 'two'
}
]
})


});
</script>
</body>

</html>

关于javascript - id 和名称设置为 Vuetify select :items so that you select a name and it sets the id as the value 的 JS 对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52503829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com