Question

假设您有一系列菜单项

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对象中吗？

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>

是否有更好的方法在运行时禁用工具栏按钮？

Answer 1

我不确定这是否是最佳解决方案，但我会将整个数组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 },
    ];
  }
}

是否可以在v-for中使用动态分配的计算属性

1 个答案: