Javascript 设置初始 vuetify v-select 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51392719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set initial vuetify v-select value
提问by John Grayson
Can someone help me set the default value for a v-select? The caveat is that my v-selectis populated with objects, which I think might be the reason why assigning my item-valueto my desired initial value isn't working:
有人可以帮我设置 a 的默认值v-select吗？需要注意的是， myv-select填充了对象，我认为这可能是将 my 分配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-selectshould be John
初始v-select应该是John
Actual:
实际的：
The initial v-selectis blank. Here's a fiddle for reference:
首字母v-select为空。这是一个小提琴供参考：
https://jsfiddle.net/tgpfhn8m/734/
https://jsfiddle.net/tgpfhn8m/734/
Can someone help? Thanks in advance!
有人可以帮忙吗？提前致谢！
回答by Psidom
I believe there are two issues with your set up. Firstly, the initial value should be one of the optionsin select, i.e., you should have peopleinclude your defaultSelected; Secondly your object needs to contain a valuefield, see v-selectprops. Otherwise you need to specify item-valueprop; See a working example here.
我认为您的设置有两个问题。首先，初始值应该是optionsin 之一select，即你应该people包含你的defaultSelected; 其次，您的对象需要包含一个value字段，请参阅v-selectprops。否则你需要指定item-valueprop; 请参阅此处的工作示例。
<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"
}
]
}
});
回答by Marc
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-modelis a special interfacing method for the valueattribute of an <input />field.
v-model是一个字段value属性的特殊接口方法<input />。
item-value="id"tells the inputfield what attributeof a selected objectitem row to setas the valueof input.user_id
item-value="id"告诉input字段attribute选定object项目行set的value内容input.user_id
item-text="name"tells the field what attributeof a selected objectitem row to use to display as the selected text.
item-text="name"告诉字段attribute使用所选object项目行的哪些内容显示为所选文本。
See Official Documentationon v-model.
请参见官方文档上v-model。
Example above is a selectfield so v-modelis representing value of what would be a selectedattribute of an optionelement like the following:
上面的示例是一个select字段，因此v-model表示元素的selected属性值，option如下所示：
<option value="1" selected>John</option>
<option value="1" selected>John</option>
The value of input.user_idis the selected item (value set by the v-modelbind)
的值为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_idin 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 POSTa JSONobject to your servers end point /my/api/exampleformatted like this:
这将POST是JSON您的服务器端点的对象，/my/api/example格式如下：
{
"user_id": 1
}
