q-select strange behavior



  • I have a select like this :

                            <q-select
                              dense
                              options-dense
                              clearable
                              :options="options"
                              option-label="nome"
                              option-value="cdgLoja"
                              emit-value
                              map-options
                              use-input
                              @filter="filterFn"
                              input-debounce="0"
                              label="Atrativo"
                              v-model="lclAtividadeDados.cdgbtms_atrativo"
                            />
    

    the object that fills the select is :

    options: [
    {
      ativo:"1",
      cdgLoja:"90550102030530008",
      codigo:"53",
      nome:"Item 01"
    },
    {
      ativo:"1",
      cdgLoja:"90550105890530002",
      codigo:"59",
      nome:"Item 02"
    },
    {
      ativo:"1",
      cdgLoja:"90550873030530057",
      codigo:"25",
      nome:"Item 03"
    }
    ]
    

    the record that fills the form :

    {
    bairro:"Centro",
    cdgLoja:"90550873030530057",
    cep:"29230-000",
    cidade:"Brasília",
    codigo:"300",
    data_ultimo:"28/01/2020",
    email:"",
    endereco:"Cel. Lourenco paiva n 1865",
    fax:""
    }
    

    when I fill the form, the active item on the select, it show the ‘cdgLoja’ (90550873030530057) instead of the name (‘Item 03’).

    If I change for the next record it continues showing the cdgLoja.
    But if I click on the Select, like if I will change the selected item ( I don’t need to change anything, just click), after that it starts showing the correct label from ‘options’ (nome)

    On the record that saves the form data I just save the value of the Select, not the name.
    But to set the active selected item it sets correcly but show initially the value instead of the label.

    am I missing something ?

    Tks
    Pedro Oliveira



  • @Pedro use hide-selected and fill-input props.



  • @metalsadman thank you very much for your reply
    I added hide-selected and fill-input but nothing changed.
    I made a small video. If you have the time you can see whats happening
    http://pedrosoft.com.br/video/select.mp4

    Thanks in advance
    Pedro Oliveira




Log in to reply