How to adjust map-options select field default value?

[steve0304]

<q-select
              outlined
              v-model="form.status"
              :options="statusOptions"
              @blur="inputValidate('status')" :error="inputError.status !== ''"
              :error-message="inputError.status"
              label="Státusz"
              emit-value
              map-options
              dense="dense"
              options-dense
              option-value="id"
              option-label="name"
            />

data() {
    return {
      form: {
        email: '',
        phone: '',
        status: ''
      },
      statusOptions: []
    }
  },

async mounted() {
    this.$q.loading.show()
    this.id = this.$route.params.id
    this.apiUrl += '?id=' + this.id

    const {
      status,
      data
    } = await httpClient.get(this.apiUrl)

    if (status === 200) {
      this.data = data.model
      this.statusOptions = Object.entries(data.statusOptions).map(key => ({id: key[0], name: key[1]}))
      formService.load(this.form, data.model)
    }

    this.$q.loading.hide()
  },

I get the select field options list from server and I get the old values from the server too. I use key value pair in select options. From the server I get a number as selected value. How can I adjust it to my select input?

[dobbel]

@steve0304

I get the select field options list from server and I get the old values from the server too. I use key value pair in select options. From the server I get a number as selected value. How can I adjust it to my select input?

I guess its’s not working so what happens now? Please create a codepen for better support.

btw this is not ok, you set a property data that is not defined in data(). Know that data != data()

this.data = data.model

[steve0304]

@dobbel
Thanks for the reply, but this was not the question. Sorry, I did not copy the full code, because it’s not relevant to the question.
this is the full data function if you are interested:

data() {
    return {
      id: null,
      apiUrl: '/user/update',
      errors: null,
      data: {},
      form: {
        email: '',
        phone: '',
        status: ''
      },
      inputError: {
        email: '',
        phone: '',
        status: ''
      },
      statusOptions: []
    }
  },

This part is works. the question is about the select input.
I get the select input options from server:

And I get the exists user data:

You can see the status is 1. So when I want to set the user status to the select input I see 1 not “Active” but when I change status the label is ok.

I hope you understand my problem.

[metalsadman]

@steve0304 you should make a codepen reproduction, since looking at your snippet it should work fine.

Edit. Are your options array of objects? Or objects? The screenshot is confusing it says objects not array, but your mounted code maps it into an array. ¯_(ツ)_/¯

So yeah a codepen should help.

[steve0304]

@metalsadman
I get an object from server and I create an array from the object to the select input options.
Here is the codepen. https://codepen.io/steve0304/pen/mdOmpKx

[steve0304]

I found the solution. Ned a parseInt When mapping the array.
Change

this.statusOptions = Object.entries(data.statusOptions).map(key => ({id: key[0], name: key[1]}))

to

this.statusOptions = Object.entries(data.statusOptions).map(key => ({id: parseInt(key[0]), name: key[1]}))

Codepen: https://codepen.io/steve0304/pen/yLVbEee