How to get the selected text of a q-select ?



  • I’m trying to use refs to get the selected text on a q-select

                    <q-select
                      class="col-xs-12 col-sm-6 col-lg-4 q-ma-sm"
                      dense
                      :options="filterOptionsEmissores"
                      options-dense
                      option-label="nome"
                      option-value="cdgbtms"
                      use-input
                      emit-value
                      input-debounce="500"
                      hide-selected
                      map-options
                      fill-input
                      @input="this.atualiza_planilha"
                      label="Agências"
                      v-model="lclReservasLista.agencia_selecionada"
                      @filter="filterFnEmissores"
                      style="max-height: 30px; border-radius: 3px;"
                      clearable
                      clear-icon="clear"
                      ref="cb_planilha_agencias"
                    />
    

    I need to use emit-value to bind the value to the model

    242fdeda-c957-4715-aeb8-6f1b64f90d70-image.png

    6a4be8a3-4490-4e62-ad13-8c5d775ed954-image.png

    When I make a console.log I can’t get the properties of that object

    console.log('cb_planilha_agencias', this.$refs.cb_planilha_agencias.selectedString)
    

    I also made a computed property to get that text, but it seems that the ref doesn’t exist.

      computed: {
    
        str_agencia_selecionada: function () {
          return this.$refs.cb_planilha_agencias ? this.$refs.cb_planilha_agencias.selectedString : 'empty'
        }
    

    it always returns ‘empty’

    The closer I got, was get the selectedString on the function trigered after @input, but it brings the value of text before the change. Not the current value.
    Is there a way of get the current displayed text on the q-select ?

    something like :

    <span>Message: {{ text displayed on q-select }}</span>
    

    With javascript we can do it simply

        var elt = document.getElementById(elementId);
        var myText = elt.options[elt.selectedIndex].text;
    

    Tks



  • I solved the problem that was bringing the old value of q-select.
    Made the function async

      methods: {
        async atualiza_planilha () {
          await console.log('cb_planilha_agencias', this.$refs.cb_planilha_agencias.selectedString)
        }
    

    but still can’t use the value with interpolation. Got the error

    TypeError: Converting circular structure to JSON
    


  • refs are not reactive. So it’s not possible to get an updated value of a ref element



  • v-model is the selection. You can control what v-model gives you too via some of the props. But, it isn’t clear what the options in your select are and what data you want from the selected option. If you can point that out, we can tell you how to get the option value you need in v-model.

    Scott


Log in to reply