I did end up implementing the functionality myself (fingers crossed quasar will implement it out-of-the-box for its components in the near future), although it wasn’t as complicated as what I linked to seems since I used a ref on each item like so:

      <q-item
        tabindex="-1"
        role="option"
        v-for="(opt, index) in options"
        :key="opt"
        :ref="opt"
        clickable
        v-close-popup
        @click="onItemClick(opt)"
        @keydown.up.prevent="focusOn(index - 1)"
        @keydown.down.prevent="focusOn(index + 1)"
      >

then in the script:

focusOn(index) {
    this.$refs[this.options[index]][0].$el.focus();
    this.chosen = this.options[index];
    //plus bounds checking code
}      

In addition to this, I

• put listeners on q-btn-dropdown to open it when the down arrow or enter button are pressed and, @show, focus on the currently/last chosen element
• put listener on q-list to exit dropdown (and indicate the last focused item as selected) when tab is pressed

Nevermind, the package did not support dynamic paths itself. I used vue-inline-svg instead and everything works perfectly. Thanks!

@s-molinari I made a wrapper component for icons. This is the core of the code:

<template>
  <img
    svg-inline
    :src="`../statics/feather/${name}.svg`"
  />
</template>

<script>
export default {
  name: "Icon",
  props: {
    name: String
  }
};
</script>

I did this but my component uses the vue-svg-inline-loader. The svg file now does not properly inline. Is there a way to get the webpack config to work for a specific boot file, or another way to globally register components so that this is not an issue?

Puedes poner ese codigo en un bloque rodeado por ``` ? Seria mucho mas facil entenderlo con resaltado de sintaxis y margenes correctos.

Otra pregunta: por que quieres buscar en v-for y no en el script?

Is this what you mean?
https://www.w3schools.com/js/js_date_methods.asp

var myDate = new Date();
var month = myDate.getMonth();

Is there a way to use Quasar for the app building side of things (deploying to mobile and web) (and maybe use some Quasar components) without including Quasar’s styling functionalities?

Reason being that I’m working with legacy code which already uses several css libraries and I don’t want to add another layer to that.

I did end up implementing the functionality myself (fingers crossed quasar will implement it out-of-the-box for its components in the near future), although it wasn’t as complicated as what I linked to seems since I used a ref on each item like so:

      <q-item
        tabindex="-1"
        role="option"
        v-for="(opt, index) in options"
        :key="opt"
        :ref="opt"
        clickable
        v-close-popup
        @click="onItemClick(opt)"
        @keydown.up.prevent="focusOn(index - 1)"
        @keydown.down.prevent="focusOn(index + 1)"
      >

then in the script:

focusOn(index) {
    this.$refs[this.options[index]][0].$el.focus();
    this.chosen = this.options[index];
    //plus bounds checking code
}      

In addition to this, I

• put listeners on q-btn-dropdown to open it when the down arrow or enter button are pressed and, @show, focus on the currently/last chosen element
• put listener on q-list to exit dropdown (and indicate the last focused item as selected) when tab is pressed

Why not just use the javascript scrollIntoView() ?

I am using QBtnDropdown in my app and want to follow the ARIA standards: one should be able to focus on items in the dropdown by using the up and down arrow keys.

So far, following https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html, I have this:

<q-btn-dropdown aria-haspopup="listbox"
    class="glossy q-ml-md q-my-md"
    color="primary"
    :label="chosen"
  >
    <q-list role="listbox" tabindex="-1">
      <q-item role="option"
              v-for="opt in options"
              clickable
              v-close-popup
              @click="onItemClick(opt)"
       >
         <q-item-section>
            <q-item-label>{{ opt }}</q-item-label>
         </q-item-section>     
      </q-item>
     </q-list>
</q-btn-dropdown>

This just scrolls up and down the page when the dropdown is selected and I use the arrow keys.
I am new to ARIA… do I have to implement the focusing functionality myself, for example like this https://dev.to/emmawedekind/creating-a-custom-accessible-drop-down-3gmo ? Or is there something I could add to my project so that I don’t have to implement it all myself?

@metalsadman Thank you, this works well for me. So is there no way to prevent the keyboard popup with qinput?