How to link a q-item to an external link?



  • I need to link a full q-item to an external link.

    With <a> tag is not working properly (losing clickable areas or hover styles).

    A click event should do the trick but I am unable to handle this.

    What can I do?

    Thanks 🙂



  • I’ve solved by using the native event. Like this:

    <q-item @click.native="…">



  • If it makes it easier, you can do the following:
    HTML:

                  <q-item  class="link" @click.native="onClick(prop.node.link)">
                    <q-item-side :icon="prop.node.icon" color="teal-6" size="18px" >
                      {{ prop.node.name }}
                    </q-item-side>
                  </q-item>
    

    SCRIPT:

    import { openURL } from 'quasar'
    

    METHOD:

        onClick: function (link) {
          openURL(link)
        }
    


  • That’s what I did: use the native event …