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

Question

进行 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-text="类型”）。 我需要将“_id”字段传递给函数，同时将“type”字段保留为下拉文本。

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

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

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

在这里查看现场演示。