[英]Set initial vuetify v-select value
Can someone help me set the default value for a v-select
?有人可以帮我设置
v-select
的默认值吗? The caveat is that my v-select
is populated with objects, which I think might be the reason why assigning my item-value
to my desired initial value isn't working:需要注意的是,我的
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"
}
]
}
});
Expected:预期的:
The initial v-select
should be John
最初的
v-select
应该是John
Actual:实际的:
The initial v-select
is blank.初始的
v-select
是空白的。 Here's a fiddle for reference:这是一个小提琴供参考:
https://jsfiddle.net/tgpfhn8m/734/ https://jsfiddle.net/tgpfhn8m/734/
How can I get the behaviour I expect?我怎样才能得到我期望的行为?
I believe there are two issues with your set up.我相信你的设置有两个问题。 Firstly, the initial value should be one of the
options
in select
, ie, you should have people
include your defaultSelected
;首先,初始值应该是
select
中的options
之一,即你应该让people
包括你的defaultSelected
; Secondly your object needs to contain a value
field , see v-select
props .其次,您的对象需要包含一个
value
字段,请参阅v-select
props 。 Otherwise you need to specify item-value
prop;否则需要指定
item-value
属性; See a working example 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"
}
]
}
});
Alternative answer for those finding this question from a search...从搜索中找到此问题的人的替代答案...
How to select default value using an attribute of an object如何使用对象的属性选择默认值
<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>
Fiddle example: https://jsfiddle.net/4c3tbj6m/小提琴示例: https ://jsfiddle.net/4c3tbj6m/
Explain usage:解释用法:
v-model
is a special interfacing method for the value
attribute of an <input />
field. v-model
是<input />
字段的value
属性的特殊接口方法。
item-value="id"
tells the input
field what attribute
of a selected object
item row to set
as the value
of input.user_id
item-value="id"
告诉input
字段将选定object
项目行的哪个attribute
set
为input.user_id
的value
item-text="name"
tells the field what attribute
of a selected object
item row to use to display as the selected text . item-text="name"
告诉字段使用选定object
项行的哪个attribute
来显示为选定文本。
See Official Documentation on v-model
.请参阅有关
v-model
官方文档。
Example above is a select
field so v-model
is representing value of what would be a selected
attribute of an option
element like the following:上面的示例是一个
select
字段,因此v-model
表示option
元素的selected
属性的值,如下所示:
<option value="1" selected>John</option>
The value of input.user_id
is the selected item (value set by the v-model
bind) input.user_id
的值是被选中的项(值由v-model
绑定设置)
You can then POST the entirety of input
(if more input fields are added) but in this case there is only user_id
in there:然后您可以发布整个
input
(如果添加了更多输入字段),但在这种情况下,那里只有user_id
:
methods: {
save() {
axios.post('/my/api/example', this.input).then(response => {
console.log(response);
})
}
}
<v-btn @click.prevent="save">SAVE</v-btn>
This will POST
a JSON
object to your servers end point /my/api/example
formatted like this:这
POST
一个JSON
对象发布到您的服务器端点/my/api/example
,格式如下:
{
"user_id": 1
}
For anyone who stumbles upon this and needs a vue 3 composition api typescript solution for select with objects:对于任何偶然发现这一点并需要一个 vue 3 composition api typescript 解决方案来选择对象的人:
<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>
Like this you can update the shape object and array equally and all of those will be reactive.像这样,您可以平等地更新形状对象和数组,所有这些都将是反应性的。
To get an initial value what I did was this because I also insert other values from an api, but I'm sure there's better ways:为了获得初始值,我所做的是因为我还从 api 插入其他值,但我确信有更好的方法:
state.shapes.push(new Shape());
Either way, I did all this because I don't want null values, and instead of new Shape()
I actually use a default shape which has the description "All", so that when I select it I have a Shape with no actual data and an id of 0.无论哪种方式,我都这样做是因为我不想要空值,而不是
new Shape()
我实际上使用了一个具有描述“全部”的默认形状,所以当我选择它时,我有一个没有实际的形状数据和 id 为 0。
for v-select you should use item-title , item-value and item-disabled props according to the official documentation .对于v-select你应该根据官方文档使用item-title , item-value和item-disabled属性。
<template>
<section>
<div>
<label for="polls">Choose a poll:</label>
<div>
<v-select v-model="selected" :items="body" item-title="name" item-value="last" />
</div>
<table-poll :selections="selections"></table-poll>
</div>
</section>
</template>
<script>
data: {
selected: '',
body: [
{
name: "Bob",
last: "One"
},
{
name: "Tom",
last: "Dylan"
},
{
name: "Mark",
last: "Wen"
}
]
}
</script>
just add selected:true只需添加 selected:true
items: [
{
text: "Name",
value: "name",
selected: true,
},
{
text: "Identifier",
value: "id",
},
{
text: "Episode",
value: "ep",
},
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.