使用 v-on:change 将特定对象元素传递给使用 Vue 和 Vuetify 的函数答案

【问题标题】：Using v-on:change to pass specific object element to a function using Vue and Vuetify使用 v-on:change 将特定对象元素传递给使用 Vue 和 Vuetify 的函数
【发布时间】：2020-02-04 11:12:01
【问题描述】：

进行 API 调用以获取以这种格式提供的类别列表：

[
  { _id: '5e3339f2dc7b240ffb1f0544', type: 'book', __v: 0 },
  { _id: '5e333d76dc7b240ffb1f0548', type: 'hat', __v: 0 }
]

类别列表填充下拉列表，“类型”用于下拉文本。

  <v-card>
    <v-form
      ref="form"
      lazy-validation
    >

      <!-- Category dropdown -->
      <v-select
        :items="categories"
        item-text="type"
        @change="onSelectedCategory"
        label="Category"
        required
        :error-messages="categoryErrors"
        @input="$v.categoryID.$touch()"
        @blur="$v.categoryID.$touch()"
      ></v-select>

    </v-form>
  </v-card>

我正在使用 v-on:change/@change Vue 事件侦听器将所选类别传递给“onSelectedCategory”函数，但似乎只能传入用于显示下拉文本的字段（通过 item-文本=“类型”）。我需要将“_id”字段传递给函数，同时将“类型”字段保留为下拉文本。

onSelectedCategory() 函数将“book”例如打印到控制台。我需要'5e3339f2dc7b240ffb1f0544'。

onSelectedCategory(event) {
  console.log(event);
},

【问题讨论】：

标签： javascript json vue.js vuetify.js

【解决方案1】：

将item-value="_id" 添加到您的模板中。

应该是这样的：

  <v-select
    :items="categories"
    item-text="type"
    item-value="_id"
    @change="onSelectedCategory"
    label="Category"
    required
    :error-messages="categoryErrors"
    @input="$v.categoryID.$touch()"
    @blur="$v.categoryID.$touch()"
  ></v-select>

查看here 现场演示。

【讨论】：