Hello
Resolved by using path and exact directives.
<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ path: ‘/showcat/’ + cat.code, exact: true }">
{{ cat.nom }}
</q-drawer-link>
Hello
Resolved by using path and exact directives.
<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ path: ‘/showcat/’ + cat.code, exact: true }">
{{ cat.nom }}
</q-drawer-link>
Bug closed.
Dan Popescu say :
This happens because a timeout is required to check if the blur event in QField and derived components will not be followed by a refocus on the same component.
If you need to have the exact order of events, but with possible duplicated events then you can listen on @focusin and @focusout.
Example here: https://codepen.io/pdanpdan/pen/YzPaZPm
@metalsadman
Unfortunately no, I just created a blank project with this code and there is the same problem with all browsers.
Adding @mousedown.prevent
to my other widgets doesn’t seem like a good idea.
I am only alerting to this problem, if there is no solution i will use addeventlistener on the underlying input .
When i leave q-input A to q-input B, “focus B” event is throwed before “blur A” !
To reproduce :
<template>
<section>
<div>
<h1>Bad</h1>
<q-input @focus="onFocus('A')" @blur="onBlur('A')" label="A" />
<q-input @focus="onFocus('B')" @blur="onBlur('B')" label="B" />
</div>
<div>
<h1>Good</h1>
<input @focus="onFocus('A')" @blur="onBlur('A')" placeholder="A" />
<input @focus="onFocus('B')" @blur="onBlur('B')" placeholder="B" />
</div>
</section>
</template>
<script>
export default {
methods: {
onFocus (e) {
console.log(`focus ${e}`)
},
onBlur (e) {
console.log(`blur ${e}`)
}
}
}
</script>
Thanks for Help
Is it possible to open QSelect options on focus or by using a method ?
Thank
If it could help,
For well debuging in chrome or visual studio code on mac osx,
I have to replace devtool param in webpack.dev.conf.js
#cheap-module-eval-source-map by #eval-source-map
Like this :
module.exports = merge(baseWebpackConfig, {
// eval-source-map is faster for development
devtool: ‘#eval-source-map’, // ‘#cheap-module-eval-source-map’,
…
}
Hope
Hello
Resolved by using path and exact directives.
<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ path: ‘/showcat/’ + cat.code, exact: true }">
{{ cat.nom }}
</q-drawer-link>
Hello
I relatively same problem with named route like this.
<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ name: ‘showcat’, params: { code: cat.code } }">
{{ cat.nom }}
</q-drawer-link>
routes: [{
path: '/demarrage',
component: load('demarrage'),
name: 'demarrage'
},
{
path: '/profil',
component: load('profil'),
name: 'profil'
},
{
path: '/',
component: load('Index'),
children: [{
path: '/accueil/',
component: load('accueil'),
name: 'accueil'
},
{
path: '/showcat/:code',
component: load('listcat'),
name: 'showcat',
props: true
},
{
path: '*',
redirect: { name: 'accueil' }
}
]
},
// Default
{ path: '*', component: load('Error404') } // Not found
]
})
In my case, links and router works fine but all q-drawer-link are selected
Thank for help.
It would be really great if you could just develop in cordova browser mode.
For the moment, the only solution I found is to manually add the tag <script type=“text/javascript” src=“cordova.js”></script> to use this mode.