javascript - vuejs在自定义下拉组件中获取选定的值

Question

我正在使用自定义选择组件并尝试将数据道具设置为selectedOffer选择中选择的值，但是$event传递的是一个空值。

如何将 selectedOffer 设置为下拉列表的值？

优惠清单.vue

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

offerList.js

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

下拉.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>

标签： javascriptvue.js

Answer 1

有关自定义表单组件的指南，请参阅在组件上使用 v-model 。

基本思想是您的组件v-model通过接受一个value道具并发出一个input事件来实现该模式。

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>