JS 对象数组，其 id 和名称设置为 Vuetify select :items 以便您选择一个名称并将 id 设置为值答案

【问题标题】：JS array of objects with an id and name set to Vuetify select :items so that you select a name and it sets the id as the valueJS 对象数组，其 id 和名称设置为 Vuetify select :items 以便您选择一个名称并将 id 设置为值
【发布时间】：2018-09-25 17:32:21
【问题描述】：

我有一个带有 id 和名称的对象数组：

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

有没有办法将名称传递给 vuetify 选择的项目，以便在选择名称时将对象的 id 设置为 v-model 值？：

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

我猜这将在 created 方法中，但不确定从哪里开始。现在，我正在为应用初始提取时商店中的团队设置一个空的团队数组：

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

我从 laravel 后端获取这个集合，所以我正在考虑转换为 id: name 键值对，但这似乎没有必要。事实上，我只是在我的资源控制器的索引方法中做最有说服力的查询：

$teams = Team::all();

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

我知道如何使用普通选择执行此操作，但不确定 vuetify 的 v-select：

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

【问题讨论】：

标签： javascript laravel-5 vue.js vuejs2 vuetify.js

【解决方案1】：

请这样做：

<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>

【讨论】：

谢谢一百万！

【解决方案2】：

您可以通过将声明更改为

<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

基本上，您可以为 :items 提供对象列表，但它们必须是 text 和 value 对。指令item-text 和item-value 帮助您为我们的用例定制它。

【讨论】：

谢谢一百万！