Mat*_*son 1 javascript vue.js laravel-5 vuejs2 vuetify.js
我有一组带有 id 和名称的对象：
Teams [
{ id: 1, name: 'team1' },
{ id:2, name: 'team2' }
]
有没有办法将名称传递给 vuetify 选择项，以便在选择名称时将对象的 id 设置为 v-model 值？：
<v-select
v-model="???"
:items="???"
label="Teams"
></v-select>
我猜这将在 created 方法中，但不确定从哪里开始。现在，我正在为应用程序初始获取时商店中的团队设置一个空的团队数组：
this.teams = this.$store.state.teams.teams
我从 laravel 后端得到它作为一个集合，所以我正在考虑在那里转换为一个 id: name 键值对，但这似乎是不必要的。事实上，我只是在我的资源控制器的 index 方法中做最有说服力的查询：
$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>
小智 7
请这样做：
<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>| 归档时间： |
|
| 查看次数： |
2635 次 |
| 最近记录： |