Установить начальное значение vuetify v-select
Кто-нибудь может помочь мне установить значение по умолчанию для 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/
Может кто-нибудь помочь? Заранее спасибо!
Ответы - Установить начальное значение vuetify v-select / Set initial vuetify v-select value

18.07.2018 05:45:57
Я считаю, что есть две проблемы с вашей установкой. Во-первых, начальное значение должно быть одним из options
в select
, т. е. вы должны иметь people
, включающих ваш defaultSelected
; во-вторых , ваш объект должен содержать поле value
, см. v-select
props . В противном случае вам нужно указать item-value
; смотрите рабочий пример здесь .
<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"
}
]
}
});


27.03.2019 12:14:34
Альтернативный ответ для тех, кто находит этот вопрос из поиска...
Как выбрать значение по умолчанию с помощью атрибута объекта
<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>
Пример скрипки: https://jsfiddle.net/4c3tbj6m/
Объясните использование:
v-model
-это специальный метод сопряжения для value
поля.
input
сообщает полю, какой атрибут строки элемента выбранного объекта нужно вставить в значение item-value="id"
input.user_id
указывает полю, какой атрибут строки элемента выбранного объекта следует использовать для отображения в качестве"выделенного текста".
Смотрите официальную документацию по этому вопросу.
Пример выше-item-text="name"
is заботится о сохранении значения того, что select
на v-model
, как это: selected
.
Значение option
-это выбранный элемент.
Затем вы можете опубликовать весь <option value="1" selected>John</option>
(если добавлено больше полей) или в этой причине там есть только input.user_id
:
input
Это приведет user_id
к отправке объекта JSON в конечную точку сервера
axios.post('/my/api/example', this.input).then(response => {
console.log(response);
})
в следующем формате:
POST