JS массив объектов с идентификатором и именем, установленным в Vuetify select: items, чтобы вы выбирали имя и устанавливали идентификатор в качестве значения - PullRequest
Новая
       6

JS массив объектов с идентификатором и именем, установленным в Vuetify select: items, чтобы вы выбирали имя и устанавливали идентификатор в качестве значения

0 голосов
/ 25 сентября 2018

У меня есть массив объектов с идентификатором и именем: 

Teams [
    { id: 1, name: 'team1' },
    { id:2, name: 'team2' } 
]

Есть ли способ передать имена в элементы vuetify select, чтобы при выборе имени вы устанавливалиидентификатор объекта в качестве значения v-модели ?: 

<v-select
  v-model="???"
  :items="???"
  label="Teams"
></v-select>

Я предполагаю, что это будет в созданном методе, но не совсем уверен, с чего начать.Прямо сейчас я устанавливаю пустой массив groups для команд, которые находятся в магазине при начальной загрузке приложения: 

this.teams = this.$store.state.teams.teams

Я получаю это как коллекцию из бэкэнда laravel, так что я размышлялпреобразование в пару ключ-значение id: имя там, но это кажется ненужным.На самом деле, я просто делаю самый лучший красноречивый запрос в методе index моего контроллера ресурсов: 

$teams = Team::all();

return response()->json($teams);

Я знаю, как сделать это с помощью обычного выбора, но не уверен с vuetify v-выберите: 

<select id="categories" v-model="selectedValue">
    <option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Вы можете сделать это, изменив объявление на 

<v-select
  :items="array-of-objects"
  label="Teams"
  item-text="id"
  item-value="name"
></v-select>

, как указано в документации:

Может быть массивом объектов или массивом строк.При использовании объектов, будет искать текст и значение поля.Это можно изменить с помощью реквизитов item-text и item-value.

Ссылка: https://vuetifyjs.com/en/components/selects

По сути, вы можете предоставить список объектов:должны быть text и value пары.Директивы item-text и item-value помогут вам настроить его для нашего варианта использования.

0 голосов
/ 25 сентября 2018 

<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-select v-model="data" :items="items" label="Teams" item-text="name"
   item-value="id"></v-select>

      <div>
        {{data}}
      </div>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    vue = new Vue({
      el: '#app',
      data: () => ({
        data: "",
        items: [{
            id: 1,
            name: 'one'
          },
          {
            id: 2,
            name: 'two'
          }
        ]
      })


    });
  </script>
</body>

</html>

Плз сделайте это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...