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.
Related
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.
I'm using bootstrap-vue with version 2.9.0. When navigating to another page, the result does not display unless I click on to another page then the previous page will show up then immediately show the current page, which I find it really weird.
Here's a snippet:
<b-table
:items="dataTable.customerList"
:fields="dataTable.fields"
:per-page="dataTable.perPage"
:current-page="dataTable.currentPage"
:sort-by.sync="dataTable.sortBy"
:sort-desc.sync="dataTable.sortDesc"
:no-local-sorting="true"
#sort-changed="sortingChanged"
responsive
striped
hover
show-empty
empty-text="Loading..."
id="tbl-customer-list"
busy.sync="true"
>
</b-table>
<b-pagination
v-model="dataTable.currentPage"
:total-rows="dataTable.totalRows"
:per-page="dataTable.perPage"
#input="getCustomers(dataTable.currentPage)"></b-pagination>
And the JS:
export default {
page: {
title: 'Customers',
meta: [{ name: 'description', content: appConfig.description }],
},
components: {
Layout,
PageHeader,
},
methods: {
getCustomers(currentPage) {
this.busy = true;
customerList({page: currentPage}).then((response) => {
this.dataTable.customerList = response.data;
this.dataTable.totalRows = response.total;
this.dataTable.currentPage = response.current_page;
this.dataTable.perPage = response.per_page;
this.dataTable.lastPage = response.last_page;
this.busy = false;
})
},
sortingChanged(ctx) {
console.log(ctx);
this.$root.$emit('bv::table::refresh', 'tbl-customer-list')
},
},
mounted() {
this.getCustomers();
},
data() {
return {
title: 'Customers',
busy: false,
dataTable: {
customerList: [],
fields: [
{ key: 'customer_name', label: 'Full Name', sortable: true },
{ key: 'actions', sortable: false },
],
totalRows: 0,
currentPage: 1,
perPage: 0,
lastPage: 1,
sortBy: 'first_name',
sortDesc: false,
filter: null,
filterOn: [],
},
}
},
}
When I remove :current-page="dataTable.currentPage" on the b-table, it works fine but I when clicking on the row headers will always display the current page as 1. (See sortingChanged)
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 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
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>