I'm generating some menu buttons dynamically (not sure if that's best practice)
script
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' },
{ title: 'Register', icon: 'mdi-image', route: '/register' },
{ title: 'Login', icon: 'mdi-help-box', route: '/login' },
],
html
<v-list-item v-for="(item, i) in items" :key="i" link :to="{path: item.route}">
But what I want to do is hide the dashboard button until they have signed in. The user signed in value is kept in store.
$store.state.user.signedIn // true/false
How can I programmatically hide buttons depending on signed in value? I was trying to do this
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', reqAuth: true }
But not sure how to get it working smoothly in the html. I'd also like to do the reverse later on the login/register buttons, if the user IS signed in then these should hide and a Logout button will come into play.
You have two options:
A) have separate menu arrays and display one or the other based on isLoggedIn. If you have any items showing in both cases, you'll need to place them in a third array and concat one of the first two with the third
B) have a boolean property on each menu item stating whether it should show when isLoggedIn or not. If you have menu items showing on both, you'll need either two props on each item (showWhenLoggedIn, showWhenLoggedOut - change them if too long) or, alternatively, you could make the show an array of booleans: show: [true, false] - first bool controlling whether it's shown when logged out, second when logged in).
Solution A) example (separate arrays):
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
loggedInMenuItems: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', show: [false, true] },
],
loggedOutMenuItems: [
{ title: 'Register', icon: 'mdi-image', route: '/register', show: [true, false] },
{ title: 'Login', icon: 'mdi-help-box', route: '/login', show: [true, false] },
],
permanentMenuItems: [
{ title: 'Terms and Conditions', icon: 'mdi-whatever', route: '/terms', show: [true, true] }
],
isLoggedIn: false
}),
computed: {
menuItems() {
return (this.isLoggedIn
? this.loggedInMenuItems
: this.loggedOutMenuItems
).concat(this.permanentMenuItems)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label><input v-model="isLoggedIn" type="checkbox"> Is logged in</label>
<pre v-html="menuItems.map(m => m.title)"></pre>
</div>
Solution B) example:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', show: [false, true] },
{ title: 'Register', icon: 'mdi-image', route: '/register', show: [true, false] },
{ title: 'Login', icon: 'mdi-help-box', route: '/login', show: [true, false] },
{ title: 'Terms and Conditions', icon: 'mdi-whatever', route: '/terms', show: [true, true] }
],
isLoggedIn: false
}),
computed: {
menuItems() {
return this.items.filter(item => item.show[Number(!!this.isLoggedIn)])
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label><input v-model="isLoggedIn" type="checkbox"> Is logged in</label>
<pre v-html="menuItems.map(m => m.title)"></pre>
</div>
I personally prefer the second one, for brevity. I also find it a tad more elegant.
However, in large teams or in projects where code complexity needs to be kept to a minimum and code readability to a maximum, the first solution is often times preferred.
Lastly, second solution allows more flexibility for menu items order, although it's not a real issue (implementing an order attribute to each item would be trivial).
Note: obviously, isLoggedIn should come from state, not from component data fn. I placed it in data so you could easily test it here.
Your items property should be defined as computed property and add shown field in each item of items and use state value as its value in dashboard link :
computed :{
items(){
const signedIn=$store.state.user.signedIn;
return [
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', shown:signedIn },
{ title: 'Register', icon: 'mdi-image', route: '/register',shown:!signedIn},
{ title: 'Login', icon: 'mdi-help-box', route: '/login' , shown:!signedIn},
]
}
}
in template add
<v-list-item v-for="(item, i) in items" :key="i" link v-if="item.shown" :to="{path: item.route}">
Related
As my project is growing, I've noticed a lot of repetitions. I'm starting with the navigations buttons, as they can appear in multiple places (side menu, navbar).
I'd like to centralize them and let the component import them as needed. So I've tried creating this file to hold all my menu items:
// menuItems.js
export default {
data() {
return {
items: [
{ title: 'Profile', icon: 'mdi-account-circle', reqAuth: true, hideOnAuth: false},
{ title: 'Dashboard', icon: 'mdi-view-dashboard', reqAuth: true, hideOnAuth: false },
{ title: 'Settings', icon: 'mdi-cog', reqAuth: true, hideOnAuth: false },
{ title: 'Signup', icon: 'mdi-account-circle-outline', reqAuth: false, hideOnAuth: true},
{ title: 'Login', icon: 'mdi-login', reqAuth: false, hideOnAuth: true },
{ title: 'Logout', icon: 'mdi-logout', reqAuth: true, hideOnAuth: false},
]
}
},
methods: {
menuItems: function(authenticated) {
if (!authenticated) {
// Gets items that do and don't require Auth, except for ones that should hide on Auth
return this.items.filter(o => o.reqAuth || !o.reqAuth && !o.hideOnAuth)
}
// Gets items that don't require Auth
return this.items.filter(o => !o.reqAuth)
}
}
}
Buttons can require authentication to be visible, and they can also be hidden once authenticated (eg. The login button).
Now lets assume I have a vue component for my nav bar, how do I import in the method that returns the filtered items?
// NavBarComponent.vue
<template>
<div>
<v-btn v-for="(item, i) in menuItems(authenticated)">
{{ item.title }}
</v-btn>
</div>
</template>
<script>
export default {
name: "NavBarComponent",
data() {
return {
authenticated: true,
}
},
methods: {
}
}
</script>
In this case, how do i make menuItems in the component reference the external file that will do the work of filtering?
You can create a mixin file and put your methods in that mixin and apply the mixin your component.
https://v2.vuejs.org/v2/guide/mixins.html
Your mixin would look like this:
// /mixins/menuItemsMixin.js
const menuItemsMixin= {
data() {
return {
items: [
{ title: 'Profile', icon: 'mdi-account-circle', reqAuth: true, hideOnAuth: false},
{ title: 'Dashboard', icon: 'mdi-view-dashboard', reqAuth: true, hideOnAuth: false },
{ title: 'Settings', icon: 'mdi-cog', reqAuth: true, hideOnAuth: false },
{ title: 'Signup', icon: 'mdi-account-circle-outline', reqAuth: false, hideOnAuth: true},
{ title: 'Login', icon: 'mdi-login', reqAuth: false, hideOnAuth: true },
{ title: 'Logout', icon: 'mdi-logout', reqAuth: true, hideOnAuth: false},
]
}
},
methods: {
menuItems: function(authenticated) {
if (!authenticated) {
// Gets items that do and don't require Auth, except for ones that should hide on Auth
return this.items.filter(o => o.reqAuth || !o.reqAuth && !o.hideOnAuth)
}
// Gets items that don't require Auth
return this.items.filter(o => !o.reqAuth)
}
}
};
export default menuItemsMixin
And in your component:
// NavBarComponent.vue
<script>
import menuItemsMixin from './mixins/menuItemsMixin.js'
export default {
mixins:[menuItemsMixin]
}
</script>
You can import this mixin in multiple components and you can also add more mixins in this component where the unique methods will be added.
I ended up creating a javascript file:
// views.js
export const views = [
{title: 'Dashboard'},
{title: 'Profile'},
{title: 'Login/Signup'},
]
then in my navbar component I imported it like so:
import {mapGetters} from "vuex";
import {views} from "../../common/views";
export default {
data: () => ({
items: views
}),
computed: {
...mapGetters(['isAuthenticated',])
menuItems: function (){
if (this.isAuthenticated) {
// do this
} else {
// do this
}
},
}
}
Then I did the same for the filtering function, but I could also just re-code it as needed if required in each component. I determined authentication state using Vuex's store, and retrieve it with mapgetters.
<componentA v-if='isAuthenticated'>
<navItem v-for='item in menuItems'>
</componentA>
I tried to modify the routing configuration problem, but the breadcrumbs have two identical user lists, the error is displayed as 首页 / 系统设置 / 用户列表 / 用户列表. For example, when the left menu clicks on the user list, it should display correctly 首页 / 系统设置 / 用户列表.
The error is displayed as:
Displayed correctly as:
router.config.js
{
path: '/settings',
name: 'settings',
component: RouteView,
redirect: '/settings/user',
meta: { title: '设置系统', keepAlive: true, icon: bxAnaalyse },
children: [
{
path: '/settings/user',
name: 'user',
component: RouteView,
redirect: '/settings/user/list',
meta: { title: '用户列表', keepAlive: false },
hideChildrenInMenu: true,
children: [
{
path: '/settings/user/list',
name: 'user',
component: () => import('#/views/settings/user/index'),
meta: { title: '用户列表', keepAlive: false }
},
{
path: '/settings/user/add',
name: 'add',
component: () => import('#/views/settings/user/add'),
meta: { title: '新增用户', keepAlive: true, hidden: true }
}
]
},
]
},
components/tools/Breadcrumb.vue
<template>
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
<router-link
v-if="item.name != name && index != 1"
:to="{ path: item.path === '' ? '/' : item.path }"
>{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script>
export default {
data () {
return {
name: '',
breadList: []
}
},
created () {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
this.breadList = []
// this.breadList.push({name: 'index', path: '/', meta: {title: '首页'}})
this.name = this.$route.name
this.$route.matched.forEach(item => {
// item.name !== 'index' && this.breadList.push(item)
this.breadList.push(item)
})
}
},
watch: {
$route () {
this.getBreadcrumb()
}
}
}
</script>
<style scoped>
</style>
Why would you redirect '/settings/user' to '/settings/user/list'? The extra "用户列表"
in the breadcrumb comes from the title of '/settings/user/list'.
I suggest you delete the '/settings/user/list' item and the 'redirect' attribute of '/settings/user'.
how to implement closing a page through a function in vue js
by example
configured routing
{
path: '/example',
component: Layout,
redirect: '/example/list',
name: 'Example',
meta: {
title: 'example',
icon: 'example'
},
children: [
{
path: 'create',
component: () => import('#/views/example/create'),
name: 'CreateArticle',
meta: { title: 'createArticle', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: () => import('#/views/example/edit'),
name: 'EditArticle',
meta: { title: 'editArticle', noCache: true },
hidden: true
},
{
path: 'list',
component: () => import('#/views/example/list'),
name: 'ArticleList',
meta: { title: 'articleList', icon: 'list' }
}]
},
when I go to ArticleList.vue, I open the list, go there to the authoring / editing country -> a new member opens (the list page remains open in the tab next to it), after submitting the form in CreateArticle.vue, the CreateArticle.vue page should close
Tried through destroy () As a result, the content of the page is cleaned, and the page itself remains (but empty), you have to close the page through X
I have a structure, like this
[{
title: "Section 1",
items: [{
title: 'Dashboard',
icon: 'tachometer-alt',
route: '/dashboard',
opened: false
},
{
title: 'Appointments',
icon: 'calendar-alt',
route: '/appointments',
opened: true
},
{
title: 'Orders',
icon: 'box',
route: '/orders',
opened: false,
children: [{
title: 'Orders submenu 1',
route: '/orders/sub1',
opened: false,
children: [{
title: 'Orders submenu 1 subsubmenu 1',
route: '/orders/sub1/sub1sub1'
}]
}]
}
]
}]
These are basically sections with menu items and every menu item could contain submenus, submenus have subsubmenus, etc.
I have a toggle function, which is getting a property array. I want to negate the variable that is "marked" by this array, so when I am getting an [0, 'items', 2, 'children', 0, 'opened'] array, the expected behaviour would be that the "Orders submenu 1" has its "opened" property set to "true".
The property indexer array is alterable too, so I can tweak that a little bit, if needed.
With Ramda, i can easly get the current value with R.path([0, 'items', 1, 'opened'], menu) but how can I set it to "true"?
Jsfiddle for example: https://jsfiddle.net/hurtonypeter/1tm4wcuo/
You can make use of lenses in Ramda to achieve this.
const togglePath = (path, obj) => R.over(R.lensPath(path), R.not, obj)
togglePath([0, 'items', 1, 'opened'], menu)
I am looking at the Durandal samples trying to understand how routing works.
The shell.js specifies these routes:
{ route: ['', 'knockout-samples*details'], moduleId: 'ko/index', title: 'Details...', nav: true, hash: '#knockout-samples' },
{ route: 'view-composition',moduleId: 'viewComposition/index', title: ...
under knockout-samples:
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: intro', nav: true},
What I am trying to achieve is having another hierarchy under helloWorld. Something like this:
I tried this but no luck:
{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld*details', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true, hash:'#knockout-samples/helloWorld'}
However, this is not working.
Does Durandal routing not support this level of navigation?
When creating a 'grandchild' or 'great grandchild' or deeper child router, the trick is to reference the relative parent router, not the root router. To get a reference to the parent router, add the module that contains the parent router as a dependency to your 'grandchild' module. You can nest routers like this indefinitely. For example:
myModuleWithChildRouter.js
define(['plugins/router'], //reference to durandal root router
function(router) {
var _childRouter = router.createChildRouter();
return { myNewChildRouter: _childRouter}
}
myModuleWithGrandchildRouter.js
define(['myModuleWithChildRouter'], //reference to module with child router
function(childRouterModule) {
var _grandChildRouter = childRouterModule.myNewChildRouter.createChildRouter();
.....
}
Hope that helps!
To get more than one navigation level I'm doing this:
The only accesible router is the root router so to have acces to the child routers, everytime that I'm creating a child router, i store it on a module.
Then, when i want to create another level, I get the child router from the module and call createChildRouter.
define([], function () {
return {
root: null,
level1: null,
level2: null
};
});
define(['plugins/router', 'routers'], function (router, routerContainer) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels/companyplussplat',
//fromParent: true
route: 'company'
}).map([
{ route: 'order/:orderID', moduleId: 'orderdetail', title: 'Order', nav: false },
{ route: 'order/:orderID*details', moduleId: 'orderdetailplussplat', title: 'Order plus splat', nav: false }
]).buildNavigationModel();
routerContainer.level1 = childRouter;
return {
activate: function () {
console.log("Activating company plus splat");
},
deactivate: function () {
console.log("Deactivating company plus splat");
},
router: childRouter
};
});
define(['plugins/router', 'routers'], function (router, routerContainer) {
//debugger;
var childRouter = routerContainer.level1.createChildRouter()
.makeRelative({
moduleId: 'orderteailplussplat',
//fromParent: true
route: 'company/order/:orderID'
}).map([
{ route: 'orderline/:orderlineID', moduleId: 'orderlinedetail', title: 'Order line detail', nav: false },
]).buildNavigationModel();
routerContainer.level2 = childRouter;
return {
activate: function (orderID) {
console.log('Activating order detail for: '+ orderID +' plus splat');
},
deactivate: function () {
console.log('Deactivating order detail plus splat');
},
router: childRouter
};
});
I hope this will help you.
I added the child as a reference to the parent router itself. Maybe a bit sneaky, but working happily:
Top level router
define(["plugins/router"], function (router) {
// create the constructor
var ctor = function() {
};
ko.utils.extend(ctor.prototype, {
activate: function () {
//var self = this;
var map = router.makeRelative({ moduleId: "viewmodels" }).map([
{ route: "", moduleId: "index", title: "Overview", nav: true, hash: "#/", enabled: true },
{ route: "data*details", moduleId: "data/shell", title: "Data Loading", nav: true, hash: "#/data", enabled: false },
{ route: "reporting*details", moduleId: "reporting/shell", title: "Reporting", nav: true, hash: "#/reporting", enabled: true },
{ route: "query*details", moduleId: "query/shell", title: "Query", nav: true, hash: "#/query", enabled: true },
{ route: "login", moduleId: "login", title: "Login", hash: "#/login", state: "out" }
]);
return map.buildNavigationModel()
.mapUnknownRoutes("404")
.activate();
});
});
return ctor;
});
Child router
define(["plugins/router"], function (router) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: "viewmodels/reporting",
fromParent: true
}).map([
{ route: "", moduleId: "index", title: "Reporting", nav: false, hash: "#/reporting" },
{ route: "standard", moduleId: "standard", title: "Standard Reports", nav: true, hash: "#/reporting/standard" },
{ route: "alert*details", moduleId: "alert/shell", title: "Alerts", nav: true, hash: "#/reporting/alert" }
]).buildNavigationModel();
// for alerts
router.child = childRouter;
var vm = {
router: childRouter
};
return vm;
});
Grandchild router
define(["plugins/router"], function (router) {
var grandchildRouter = router.child.createChildRouter()
.makeRelative({
moduleId: "viewmodels/reporting/alert",
fromParent: true
}).map([
{ route: "", moduleId: "index", title: "Alerts", hash: "#/reporting/alert" },
{ route: ":id", moduleId: "case", title: "Alert Details", hash: "#/reporting/alert" }
]).buildNavigationModel();
var vm = {
router: grandchildRouter
};
return vm;
});
Hope that helps.
If you are using durandal 2.0 you can set up the child router. This will allow you to create a new router under the hello world that you can chain on additional info for for sub views in your view. You can look these up on the docs but make sure you set up that router within the view so when you hit a route like
#helloworld/subview
you have already activated helloworld