v-select同步修改器将ID为ID的文本从子级传递到父级

Question

I have the following v-select in child component.

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

in parent, I got .sync modifier for addOnLabelId . Turns out that $event passed in $emit is just only id of the select user chose.

Question 1): How can I also pass text with the id together?

Question 2) is it possible to include another sync modifier for v-select so that when select changes, it throws two $emits (one that throws id, and one that throws text) and in parent component, i can catch those separately?

Answer 1

You can pass in objects as items in a v-select , but you have to associate the value and the text by using item-text and item-state .

And if you want an object back, then you have to also add the return-object attribute to the v-select . ( https://vuetifyjs.com/en/components/selects#customized-item-text-and-value )

return-object described in the Vuetify docs:

Changes the selection behavior to return the object directly rather than the value specified with 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>

And the 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)
    }
  }
})

Here's a working Codepen: https://codepen.io/mukagergely/pen/wVJLyQ

If you look at the console in the Codepen, then it logs that the $event returned is an object .

I also added @input and @change to the v-select , but you don't need both.

I hope this helps you solve your problem.