vuejs get selected value in custom dropdown component

Question

I'm using a custom select component and trying to set the data prop selectedOffer to the value selected in the select, however $event is passing an empty value.

How can I set selectedOffer to the value of the dropdown?

offersList.vue

 <dropdown
              :options="userOffers"
              :value="selectedOffer"
              :item-title-key="'title'"
              :item-value-key="'id'"
              :item-id-key="'id'"
              @optionSelected="setSelectedOffer($event)" />

offersList.js

 data() {
    return {
      userOffers: [{title: 'aus ITA'},{title: 'aus DE'}],
      selectedOffer: '',
    };
  },
 methods: {
    setSelectedOffer(value) {
      this.selectedOffer = value;
      console.log(this.selectedOffer);
    },
  },

dropdown.vue

<select
          :id="id"
          :name="name"
          @change="$emit('optionSelected', $event.target.value)">
        <slot/>
        <option
            v-for="item in options"
            :title="item[itemTitleKey]"
            :value="item[itemValueKey]"
            :key="item[itemIdKey]">
          {{ item[itemTitleKey] }}
        </option>
      </select>

FYI, use kebab-cased event names. See vuejs.org/v2/guide/components-custom-events.html#Event-Names — Phil
– Phil, Commented Jul 20, 2021 at 12:02

tony19 · Accepted Answer · 2022-07-15 21:56:09Z

2

See Using v-model on Components for a guide on custom form components.

The basic idea is that your component implements the v-model pattern by accepting a value prop and emitting an input event.

Vue.component("dropdown", {
  template: `
    <select @input="$emit('input', $event.target.value)">
      <slot>
        <option value="" :disabled="!!value">Select...</option>
      </slot>
      <option
        v-for="item in options"
        :title="item[itemTitleKey]"
        :value="item[itemValueKey]"
        :key="item[itemIdKey]"
        :selected="value == item[itemValueKey]"
      >
       {{ item[itemTitleKey] }}
      </option>
    </select>`,
  props: {
    value: [String, Number],
    options: Array,
    itemTitleKey: {
      type: String,
      default: "title"
    },
    itemValueKey: {
      type: String,
      default: "id"
    },
    itemIdKey: {
      type: String,
      default: "id"
    }
  }
})

new Vue({
  el: "#app",
  data: () => ({
    userOffers: [{id: 1, title: 'aus ITA'},{id: 2, title: 'aus DE'}],
    selectedOffer: null,
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <dropdown
    :options="userOffers"
    v-model="selectedOffer"
    item-title-key="title"
    item-value-key="id"
    item-id-key="id"
  ></dropdown>
  
  <pre>selectedOffer = {{ selectedOffer }}</pre>
</div>

edited Jul 15, 2022 at 21:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 20, 2021 at 12:35

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tom harrison Over a year ago

and how would I get it to display the title instead of id as the value?

Collectives™ on Stack Overflow

vuejs get selected value in custom dropdown component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related