有人可以帮我设置v-select
的默认值吗?需要注意的是,我的v-select
填充了对象,我认为这可能是为什么无法将我的item-value
分配给所需的初始值的原因:
<v-select
item-text="name"
v-model="defaultSelected"
:items="people"
>
Vue.use(Vuetify);
const vm = new Vue({
el: "#app",
data: {
defaultSelected: {
name: "John",
last: "Doe"
},
people: [
{
name: "Harry",
last: "Potter"
},
{
name: "George",
last: "Bush"
}
]
}
});
预期:
初始v-select
应该是John
实际:
首字母v-select
为空白。这是一个小提琴供参考:
https://jsfiddle.net/tgpfhn8m/734/
有人可以帮忙吗?预先感谢!
答案 0 :(得分:10)
我相信您的设置存在两个问题。首先,初始值应为options
中的select
之一,即,您应该让people
包含defaultSelected
;其次, 您的对象需要包含一个value
字段 ,请参见v-select
props。否则,您需要指定item-value
道具;参见工作示例here。
<v-select
item-text="name"
item-value="last"
v-model="defaultSelected"
:items="people"
>
Vue.use(Vuetify);
const vm = new Vue({
el: "#app",
data: {
defaultSelected: {
name: "John",
last: "Doe"
},
people: [
{
name: "John",
last: "Doe"
},
{
name: "Harry",
last: "Potter"
},
{
name: "George",
last: "Bush"
}
]
}
});
答案 1 :(得分:0)
从搜索中找到此问题的人的替代答案...
如何使用对象的属性选择默认值
<template>
<v-select v-model="input.user_id" :items="users" item-value="id" item-text="name" label="Users"/>
</template>
<script>
export default {
data: () => ({
input: {
user_id: 2,
},
users: [
{
id: 1,
name: "John",
last: "Doe"
},
{
id: 2,
name: "Harry",
last: "Potter"
},
{
id: 3,
name: "George",
last: "Bush"
}
]
}),
}
</script>
答案 2 :(得分:0)
对于任何偶然发现并需要 vue 3 组合 api 打字稿解决方案来选择对象的人:
<template>
<select v-model="state.selectedShape">
<option
v-for="(shape) in state.shapes"
:key="shape.id"
:value="shape">
{{ shape.description }}
</option>
</select>
</template>
<script>
setup () {
const state = reactive({
selectedShape: new Shape(),
shapes: Array<Shape>(),
});
}
</script>
像这样你可以平等地更新形状对象和数组,所有这些都将是反应性的。
为了获得初始值,我这样做是因为我还从 api 中插入了其他值,但我确信有更好的方法:
state.shapes.push(new Shape());
无论哪种方式,我都这样做是因为我不想要空值,而不是 new Shape()
我实际上使用了一个具有描述“All”的默认形状,因此当我选择它时,我有一个没有实际数据且 id 为 0 的形状。
答案 3 :(得分:-1)
只需添加 selected:true
items: [
{
text: "Name",
value: "name",
selected: true,
},
{
text: "Identifier",
value: "id",
},
{
text: "Episode",
value: "ep",
},
],