有人能帮我设置一个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/
我怎样才能得到我所期望的行为?
4条答案
按热度按时间js81xvg61#
我认为您的设置存在两个问题:第一,初始值应该是
select
中的options
之一,即您应该让people
包含您的defaultSelected
;其次***你的对象需要包含一个value
字段***,参见v-select
props。否则你需要指定item-value
属性;请参见工作示例here。t98cgbkg2#
通过搜索找到此问题的人的替代答案...
v-model
是用于<input />
字段的value
属性的特殊接口方法。item-value="id"
告诉input
字段将所选object
项行的attribute
作为input.user_id
的value
发送到set
item-text="name"
告诉字段要使用选定object
项行的哪个attribute
显示为选定文本。请参见
v-model
上的Official Documentation。上面的示例是
select
字段,因此v-model
表示option
元素的selected
属性的值,如下所示:<option value="1" selected>John</option>
input.user_id
的值是选定项(由v-model
绑定设置的值)然后可以POST整个
input
(如果添加了更多输入字段),但在本例中只有user_id
:x一个一个一个一个x一个一个二个x
这将
POST
一个JSON
对象到您的服务器端点/my/api/example
,格式如下:eimct9ow3#
对于那些偶然发现这一点并需要一个vue 3 composition API typescript解决方案来选择对象的人:
像这样,您可以平等地更新图形对象和数组,所有这些都将是被动的。
为了得到一个初始值,我是这样做的,因为我也从API中插入其他值,但我相信有更好的方法:
无论哪种方式,我做这一切是因为我不想空值,而不是
new Shape()
,我实际上使用了一个默认的形状,其描述为“All”,所以当我选择它时,我有一个没有实际数据和id为0的形状。vaqhlq814#
仅添加选定项:真