Question

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

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

是否可以将名称传递给vuetify select的项目，以便在选择名称时将对象的id设置为v-model值？：

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

我猜想这将在创建的方法中，但不能真正确定从哪里开始。现在，我在应用程序初始获取时为商店中的团队设置了一个空的团队数组：

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

我是从laravel后端获得这个集合的，所以我正在考虑将其转换为id：名称键值对，但这似乎是不必要的。实际上，我只是在资源控制器的index方法中执行最流畅的查询：

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

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

Plz就是这样。

Answer 2

您可以通过将声明更改为

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

如文档中所述：

可以是对象数组或字符串数组。使用物件时将查找文本和值字段。可以使用项目文本和项目价值道具。

参考：https://vuetifyjs.com/en/components/selects

基本上，您可以给：items提供对象列表，但是它们必须是text和value对。指令item-text和item-value可帮助您针对我们的用例对其进行自定义。

ID和名称设置为Vuetify的对象的JS数组select：items，以便您选择名称并将ID设置为值

2 个答案: