假设您有一系列菜单项
navigationItems: [
{ title: 'Lookup', icon: 'search', link: '/lookup' },
{ title: 'Parts', icon: 'view_list', link: '/parts' },
{ title: 'Warehouse', icon: 'location_city', link: '/warehouse' },
]
computed:{
partsDisabled(){
return (this.$store.getters.parts.length == 0)
},
warehouseDisabled(){
return (this.$store.getters.warehouseParts.length == 0)
},
notDisabled(){
return false;
}
navigationItems: [
{ title: 'Lookup', icon: 'search', link: '/lookup', checker: 'notDisabled' },
{ title: 'Parts', icon: 'view_list', link: '/parts', checker: 'partsDisabled' },
{ title: 'Warehouse', icon: 'location_city', link: '/warehouse', checker: 'warehouseDisabled' },
]
:disabled="item.checker"
<v-btn
v-for="item in navigationItems"
:key="item.title"
flat
:to="item.link"
:disabled="item.checker" >
<v-icon left>{{item.icon}}</v-icon>{{item.title}}
</v-btn>
是否有更好的方法在运行时禁用工具栏按钮?
答案 0 :(得分:2)
我不确定这是否是最佳解决方案,但我会将整个数组navigationItems
定义为计算属性。这是有效的代码笔:https://codepen.io/anon/pen/MZxmdZ?editors=1111
您的代码如下:
computed: {
navigationItems() {
return [
{ title: 'Lookup', icon: 'search', link: '/lookup', checker: false },
{ title: 'Parts', icon: 'view_list', link: '/parts', checker: this.$store.getters.parts.length === 0 },
{ title: 'Warehouse', icon: 'location_city', link: '/warehouse', checker: this.$store.getters.warehouseParts.length === 0 },
];
}
}