q-drawer-linux question

Sfinx

Hi,

It will be good to have the q-drawer-link that is able to react to clicks as v-link does. For example:

…
<q-drawer-link @click=“do_login”>Login</q-drawer-link>
…

The @click is ignored by current q-drawer-link implementation because of “drawer-closer” class.

So the “to” can be optional here.

Rus

rstoenescu

Vue states that for native events you must use the .native modifier. In your case, like this: @click.native="do_login". Using the @click syntax without native modifier means the component should emit that event instead.

Also make sure you put a delay in your callback if you change route, otherwise it will mess with the “back button feature” of the Drawer.

Sfinx

Just checked <q-drawer-link to="/about" @click.native=“about”> do not works - I’m constantly getting the route event first - it does route.push(). So I’ve tried prevent & stop modifiers.

Sfinx

Typo made: the click.native works but along with router.push(). It is possible to disable default routing event in particular q-drawer-link element ?

rstoenescu

What are you trying to achieve? Why do you need route change and also a “click” event handler?

Sfinx

I think that routes is overcompilcated concept and better suited to the web only apps that needs constant links. So take in account current routes problems with Cordova. For the SA the simple clicks is fully sufficient where you can just open/close needed dialogs or show/hide layouts. In short I’m tryng to create the SA without routes. This requires to react to clicks only which appears as the problem at least for the q-drawer-link which pushes the route in any way. I’ve made workaround with custom component but trying to figure out if this approach is possible using stock ones.

rstoenescu

Ah, but in your situation, why don’t you use a simple list without the q-drawer-link? DrawerLink (as its name implies) is supposed to get you to another route. Its HTML template is just syntactic sugar over a list item with the additional handling of route change.

wdiechmann

(total noob, sorry!) but if I would like a (left) drawer with 2-3 links AND a “link” to a modal for login?

rstoenescu

@wdiechmann same principle applies. If you don’t want routes, then just create the list items which do whatever you want on click events. Only thing is you need to take care is to delay opening a Modal with 100ms (so a click event with a setTimeout in it).

aswinkp

we cant even use “v-go-back” in <q-drawer-link> because :to is a required prop. It would be better if we have these props optional.

aswinkp

@aswinkp said in q-drawer-linux question:

we cant even use “v-go-back” in <q-drawer-link> because :to is a required prop. It would be better if we have these props optional.

I think it is a must have because, logout will be mostly in the drawer. This forces to use list instead.

LaurentPayot

@aswinkp you can “cheat” this way :
(in pug/jade)

div(@click.capture="signout")
	q-drawer-link(icon="person_outline", :to="{exact: true}")
		| {{$t('auth.signout.label')}}

rstoenescu

It makes no sense to use a drawer-link if you don’t link it to a route. What I keep saying is that you can simply create a list item and assign @click event to it. No need for DrawerLink in this case.

LaurentPayot

Sure, but using a route-less drawer-link is the simplest way to get all the CSS classes to make it perfectly aligned with the others “normal” drawer-links of the drawer.

afd

@LaurentPayot : you could write a small component that inserts the proper markup.

LaurentPayot

@afd I’m so lazy, once you’re into pug there’s no coming back to html Here is the html, if that’s what you’re asking for…

<div @click.capture="signout">
  <q-drawer-link icon="person_outline" :to="{exact: true}">
    Sign out
  </q-drawer-link>
</div>

No More Posting New Topics!

q-drawer-linux question