v-select同步修改器將ID為ID的文本從子級傳遞到父級

Question

我在子組件中具有以下v-select。

<VSelect
                label="Attribute"
                :items="addOnLabelItems"
                :value="addOnLabelId"
                @input="
                  $emit('update:addOnLabelId', $event)
                "
                solo
                outline
                reverse
                type="text"
              />

在父級中，我為addOnLabelId獲得了.sync修飾符。 事實證明，傳遞給$emit $ event只是所選用戶的ID。

問題1）：如何將帶有ID的文本一起傳遞？

問題2）是否可以為v-select包含另一個同步修飾符，以便在select更改時，它引發兩個$emits （一個引發id，一個引發文本），並且在父組件中，我可以分別捕獲它們？

Answer 1

您可以在v-select中將對象作為項目傳入，但必須使用item-text和item-state將值和文本關聯起來。

如果要返回對象，則還必須將return-object屬性添加到v-select 。 （ https://vuetifyjs.com/en/components/selects#customized-item-text-and-value ）

Vuetify文檔中描述的返回對象 ：

更改選擇行為以直接返回對象，而不是使用item-value指定的值

HTML / VUE：

<div id="app">
  <v-container fluid grid-list-xl>
    <v-layout wrap align-center>
      <v-flex xs12 sm6 d-flex>
        <v-select
          :items="items"
          label="Attributes"
          item-text="state"
          item-value="abbr"
          @input="atInput($event)"
          @change="atInput($event)"
          return-object
        ></v-select>
      </v-flex>
    </v-layout>
  </v-container>
</div>

和JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [
      { state: 'Florida', abbr: 'FL' },
      { state: 'Georgia', abbr: 'GA' },
      { state: 'Nebraska', abbr: 'NE' },
      { state: 'California', abbr: 'CA' },
      { state: 'New York', abbr: 'NY' },
    ],
  },
  methods: {
    atInput(event) {
      console.log(event)
    }
  }
})

這是一個有效的Codepen： https ：//codepen.io/mukagergely/pen/wVJLyQ

如果您查看Codepen中的控制台，那么它將記錄返回的$ event是一個object 。

我還在v-select中添加了@input和@change ，但是您不需要兩者。

我希望這可以幫助您解決問題。