I am trying to add a submenu from a javascriot file.
Default menu works perfectly, but I don't know if it is possible to assign a submenu using that same structure.
export const getTabsMdl = () => {
let r = null
r = [
{ name: 'Saldo', icon: 'receipt', to: '/saldo' },
{ name: 'Vendas', icon: 'receipt', to: '/vendas' },
{ name: 'Account', icon: 'assignment', to: '/conta' },
{ name: 'Clients', icon: 'supervisor_account', to: '/clientes' },
{ name: 'More', [{ name: 'Sub-Item', icon: 'autorenew', to: '/sub-01' }] }
return r
}
<q-route-tab
v-for="(bTab, bTIndex) in getTabsMdl()"
:to="bTab.to"
:label="bTab.name"
:name="bTab.name"
:icon="bTab.icon"
:key="bTIndex"
no-caps
/>
In Quasar, you can define hierarchy of menus.
Please check this one.
https://github.com/quasarframework/quasar/blob/dev/docs/src/examples/QMenu/MenuInMenu.vue
Related
I am using SideMenuBar from https://www.npmjs.com/package/vue-sidebar-menu to generate a side menu for my app. The elements in the bar should be dynamic based on whether the person is logged-in. The problem I have is that when I login, the items arent reactive - I need to refresh my browser for the menu to refresh. Any idea what I am doing wrong?
<div id="app">
<sidebar-menu :menu="dynamicMenu" #toggle-collapse="onToggleCollapse" #item-click="onItemClick" :collapsed="collapseMenu" >
</sidebar-menu>
<router-view />
computed: {
isAuthorized: function() {
return UserStorageService.GetUser() === null ? false : true;
},
dynamicMenu() {
return [
{
header: true,
title: "Menu",
hiddenOnCollapse: true
},
{
href: { path: "/" },
title: "Home",
icon: "fas fa-home"
},
{
href: { path: "/Dashboard" },
title: "Dashboard",
icon: "fas fa-folder",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "Reporting",
icon: "fas fa-archive",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "My profile",
icon: "fas fa-share-alt",
hidden: !this.isAuthorized
}
]
}
},
When I sign-in, the value of "isAuthorized" should change to true. That value should then be assigned to my dynamic menu (the inverse) and should toggle the menu option hidden/not-hidden.
I work with dynamic routes similar a this form:
router.js
...
{
path: "/init/clients/moral-person/:company",
name: "moralPerson",
component: () => import('../MoralPerson.vue'),
meta: {
auth: true,
breadcrumb: [
{ text: "Init", disabled: false, name: "init" },
{ text: "Clients", disabled: true, name: "" },
{ text: "Moral Person", disabled: false, name: "crudMoralPerson"},
{ text: "Company", disabled: true, name: "", icon: "fas fa-dollar-sign"},
]
}
}
...
NOTE: The part of breadcrumb is render for other component.
When I do router.push is this:
Some File
...
this.$router.push({
name: "moralPerson",
params: { company: this.nameCompany }
});
...
Finally looks similar this:
I try to use the this.router.params, in this case :company and colocate in the part blue I mark or here:
router.js
...
// in this line
{ text: :company, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...
My question is, How access this param and colocate in this part I need?
EDIT
I try with:
...
{ text: this.$route.params.empresa, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...
And always send me:
Let see, in your router configuration you are indicating that moralPerson component will receive a param called company, isn't it?
this.$router.push({
name: "moralPerson",
params: { company: this.nameCompany }
});
The code above is correct, you must call your component using name if you want to pass some params.
To access this param you must do the following, mainly inside created lifecycle function:
this.$route.params.company
I hope this could help you
Try something like this:
{
path: '/init/clients/moral-person/:company'
name: 'moralPerson',
component: () => import('../MoralPerson.vue'),
meta() {
return {
auth: true,
breadcrumb: [
{ text: 'Init', disabled: false, name: 'init' },
{ text: 'Clients', disabled: true, name: '' },
{ text: 'Moral Person', disabled: false, name: 'crudMoralPerson' },
{ text: this.params.company, disabled: true, name: '', icon: 'fas fa-dollar-sign' },
],
};
},
},
When you call the meta function, try this this.$route.meta(), because now the meta property is a function.
Please help, i will explain first by showing the code :
home.js
onHelpPagePress() {
Promise.all([
AntDesign.getImageSource('arrowleft', 25)
]).then((sources) => {
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'projectName.HelpPage',
options: {
topBar: {
title: {
text: 'Screen Name 1',
},
drawBehind: false,
leftButtons: [
{
id: 'backButton',
enabled: true,
showAsAction: 'ifRoom',
component: {
name: 'projectName.Home',
passProps: {
color: 'white',
// pass event here
}
},
icon: sources[0],
color: 'white',
},
],
}
}
},
}]
}
}
});
});
}
it will looks like this :
------------------------------------
<- Screen Name 1
------------------------------------
how can i access the back button in the new screen?
and could someone help me how can i go to the previous screen?
thanks
it fixed when using navigation.showmodal
I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
I don't have any problem in localizing the components and views strings but I am lock into finding a way to localize dynamically the Toolbar items ( and of course the same items in the navigation drawer..
Currently they are displayed in App.vue as menuItems[i].title
<v-toolbar-items class="hidden-xs-only">
<v-btn flat :to="menuItems[0].link">
<v-icon left>{{ menuItems[0].icon }}</v-icon>
<span>{{ menuItems[0].title }}</span>
</v-btn>
with the script:
<script>
export default {
data () {
return {
appName: 'myAPP',
sideNav: false,
menuItems: [
{ icon: 'home', title: 'Home', link: '/home' },
{ icon: 'info', title: 'About', menu: [{ title: 'Company', link: '/company' }, { title: 'Office', link: '/office' }] },
{ icon: 'people', title: 'Members', menu: [], link: '/members' },
{ icon: 'local_library', title: 'Blog', link: '/blog' },
{ icon: 'local_grocery_store', title: 'Shopping', link: '/shopping' }
]
}
},
methods: {
switchLocale: function (newLocale) {
this.$store.dispatch('switchI18n', newLocale)
}
}
}
</script>
Should I use a computed value ? or use directly $t() in the template ?
feedback, advices and links appreciated
UPDATE
main.js
Vue.filter('translate', function (value) {
if (!value) return ''
value = 'lang.views.global.' + value.toString()
return i18n.t(value)
})
locales/i18n/en_US
{
"views": {
"global": {
"Home": "Home",
"Section1": "Section 1",
..
Vue provides filter to help us to format the common text.
So I think it will be one of your choices.
You can click above link to follow the guide to set up your filters.
Edit:
I just realized Vue-filters should not be dependent on this context as the Vue author said. So updated my answer as below:
Then the codes will be like below:
// create vue-i18n instance
const i18n = new VueI18n({
locale: getDefaultLanguage(),
messages: langs
})
// create global filter
Vue.filter('myLocale', function (value) {
return i18n.t(value)
})
In your views or components:
<template>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat :to="menuItems[0].link">
<v-icon left>{{ menuItems[0].icon }}</v-icon>
<span>{{ menuItems[0].title | myLocale }}</span>
</v-btn>
</template>
<script>
export default {
data () {
return {
appName: 'myAPP',
sideNav: false,
menuItems: [
{ icon: 'home', title: 'Home', link: '/home' },
{ icon: 'info', title: 'About', menu: [{ title: 'Company', link: '/company' }, { title: 'Office', link: '/office' }] },
{ icon: 'people', title: 'Members', menu: [], link: '/members' },
{ icon: 'local_library', title: 'Blog', link: '/blog' },
{ icon: 'local_grocery_store', title: 'Shopping', link: '/shopping' }
]
}
},
filters: {
myLocaleWhichNotWork: function (value) {
return this.$t(value) // this won't work because filters should not be dependent on this context
}
}
}
</script>