question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

q-btn doesn't talk about `type` property for navigation

See original GitHub issue

What happened?

from docs: https://v1.quasar.dev/vue-components/button#handling-navigation

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn to="/start/pick-quasar-flavour" label="To Docs index" outline color="purple" />
    <q-btn to="/start/pick-quasar-flavour" label="To Docs index in 2s" @click="linkClick" glossy color="purple" />

    <q-btn href="start/pick-quasar-flavour" label="With href" push color="purple" />
    <q-btn href="start/pick-quasar-flavour" target="_blank" label="With href - open in new window" color="purple" />
  </div>
</template>

the q-btn component with href doesn’t talk about type= "a" property to turn the <button> attribute into <a> attribute. Found it the hard way thanks to @protozoo

The weird part is the examples in docs work without type= "a" but in codepen they don’t

What did you expect to happen?

Have the docs example code contain type= "a" property

Reproduction URL

https://codepen.io/abhimanyuaryan/pen/yLPjWew

How to reproduce?

  1. Go to codepen link I gave
  2. remove type= "a" from html code and button navigation will fail

Flavour

UMD

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

No response

Relevant log output

No response

Additional context

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
yusufkandemircommented, Mar 23, 2022

@AbhimanyuAryan it’s not that important, don’t worry. I’ve adjusted the labels to reflect the situation, so there is no problem.

1reaction
yusufkandemircommented, Mar 23, 2022

@AbhimanyuAryan please use Docs Report instead of Bug Report next time, as this is not a bug.

Since this applies to examples of both Qv1 and Qv2, you need to create 2 separate PRs, for dev and v1 branches. Here are the file locations for both branches: dev(Qv2): https://github.com/quasarframework/quasar/blob/dev/docs/public/examples/QBtn/Links.vue v1(Qv1): https://github.com/quasarframework/quasar/blob/v1/docs/src/examples/QBtn/Links.vue

Thanks for your effort 👏

Read more comments on GitHub >

github_iconTop Results From Across the Web

Button - Quasar Framework
The QBtn Vue component is a button with features like shaping, loading state, ripple and more.
Read more >
How to use focus() on QButton (<q-btn>)? - Stack Overflow
Retrieve the native DOM element by using $el and set focus() on that: this.$refs.btn.$el.focus(). Some Quasar component have built-in ...
Read more >
Open in new tab | Quasar Framework Community
I know users heavily make use of “Open in new tab” and “Copy link location” type functionality for emails and chat and such....
Read more >
VueJS Quasar Framework: 3 IMPORTANT COMPONENTS ...
Button - Quasar Button - Quasar has a component called QBtn which is a button with a few extra useful features. For instance,...
Read more >
Property 'fullName' does not exist on type 'object' : r/reactnative
React Navigation V5 + Typescript Error: Property 'fullName' does not exist on type 'object'. My Goal: I'm trying to add Typescript typings, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found