select component needs label and value parameters

[afilic]

Here is what would improove SELECT component. Now, I have to rename my fields to get this component work, but this woud be much better.

<q-select
  type="list"
  v-model="select"
  :options="selectOptions"
  label="comp_name"
  value="comp_id"
></q-select>

Thank you for this great framework.

[rstoenescu]

Hi, what exactly are you looking for? Be more specific please.

[afilic]

This is from documentation example:

selectOptions: [
  {
    label: 'Google',
    value: 'goog'
  },
  {
    label: 'Facebook',
    value: 'fb'
  },
  ...
]

My data looks like this:

selectOptions: [
  {
    comp_name: 'Google',
    comp_id: 'goog'
  },
  {
    comp_name: 'Facebook',
    comp_id: 'fb'
  },
  ...
]

I don't like to rename the fields from database. Maybe I missed something?

[rstoenescu]

I see now. What you can do is when you retrieve data use JS .map() to store options in the requested format.

let options = selectOptions.map(opt => ({label: opt.comp_name, value: opt.comp_id}))

[DeepaChalla]

Hi,
How can I use this for dynamic data?

[rstoenescu]

@Dmedip use a Vue computed property

[DeepaChalla]

@rstoenescu Thank you but how can id to that .In data instead of passing label and value (static data) how can I pass dynamic data ?
Types:
[
{
label: 'fdf',
value: 'dfd'
}
],

[rstoenescu]

@Dmedip Use a Vue computed property... :|

computed: {
  selectOptions () {
     return [ { label: this.myLabel, value: this.myLabelValue }, ... ]
  }
}

[DeepaChalla]

hi @rstoenescu Thank you so much fro your time,trying but still could not workout,can you please take a look at below code .I have two dropdowns and need to display data for dropdowns using computed.Please help.Thanks

data{
Types: [],
Operations: [],
}
computed {
}