Установить начальное значение vuetify v-select

18.07.2018 05:29:23 Просмотров 92 Источник

Кто-нибудь может помочь мне установить значение по умолчанию для 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

Является ответом!

Psidom

18.07.2018 05:45:57

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

Источник

https://stackoverflow.com/questions/51392719/set-initial-vuetify-v-select-value/51392835#comment98675824_51392835

Примечание: массив должен быть объектом или строковые примитивы, такие как числа, не будут работать.

Источник

Marc Newton

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); })в следующем формате: