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

[Pedro]

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

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

[Pedro]

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

[Pedro]

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

[s.molinari]

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