q-select does not show selected label while passing option value

[sodhigurpreetsingh]

Hello All,

I have a BaseSelect component where i am using q-select as base component. The problem i am having is when i am editing a form and passing the value to repopulate the label on my q-select it only shows its value but not the label.

I have attached the screenshots below for more clarity

Create Mode

Edit Mode

My BaseSelect Component Code

<template>
  <div>
    <q-select
      :options="arrMatchedOptions"
      use-input
      hide-selected
      hide-bottom-space
      fill-input
      outlined
      map-options
      input-debounce="0"
      :option-value="strOptionValue"
      :option-label="strOptionLabel"
      option-disable="inactive"
      :label="strLabel"
      emit-value
      clearable
      @filter="fnFilter"
      :value="value"
      v-on:input="emit"
      :loading="blnLoading"
      :rules="arrRules"
    ></q-select>
  </div>
</template>

<script>
export default {
  props: {
    value: { required: true },
    strLabel: {
      type: String,
      required: true
    },
    strOptionLabel: {
      type: String,
      required: false,
      default: 'name'
    },
    strOptionValue: {
      type: String,
      required: false,
      default: 'id'
    },
    arrOptions: {
      type: Array,
      required: true
    },
    blnLoading: {
      type: Boolean,
      default: false
    },
    blnRequired: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    arrRules () {
      if (this.blnRequired) {
        return [this.$utils.requiredSelectRule]
      }
    }
  },
  mounted () {},
  created() {
   },
  data () {
    return {
      arrMatchedOptions: this.$utils.clone(this.arrOptions)

    }
  },
  methods: {
    emit (value) {
      //console.log('emitting,', value)
      this.$emit('input', value)
    },
    fnFilter (strVal, update) {
      if (strVal === '') {
        update(() => {
          this.arrMatchedOptions = this.arrOptions
        })
        return
      }

      update(() => {
        const strNeedle = strVal.toLowerCase()

        this.arrMatchedOptions = this.arrOptions.filter(obj => {
          const strOptionLabel = obj[this.strOptionLabel]
          return strOptionLabel.toLowerCase().indexOf(strNeedle) > -1
        })
      })
    }
  }
}
</script>

<style></style>

Can someone please help on this.

Thanks very much in advance..

[metalsadman]

Please show how are you using it in your arent component. better make a codepen.

At first glance you probably have to move the code where you are populating your options array in the mounted hook.

[sodhigurpreetsingh]

Hi Aldrin

Thanks for your quick response, appreciate that..

Sorry i have figured out the bug, let me paste it so in case someone has it might help

it was because in my call i was not checking if the array (which is populated using an api) passed to base component was populated.

so i have this call in my child component where i check if arrHotels has values,

i was missing v-if="arrHotels.length" earlier now have fixed

  <div class="flexCol mt16px" v-if="arrHotels.length">

            <BaseSelect
              :arrOptions="arrHotels"
              strOptionLabel="name"
              strOptionValue="id"
              :blnRequired="true"
              strLabel="Choose Hotel"
              v-model="objModel.hotel_id"
            ></BaseSelect>

          </div>

Thanks very much for your quick response.