[Vuejs]-Vue navigation with vue router: dynamic navigation items upon user selection

0👍

Finally resolved. I mapped the selection items from schema in state and matched them with the actual selected items. Therefore i build a method in the navigation-drawer, getting the difference between selected items and selection items. Method is called in the computedRoutes and filtered upon meta fields value.

Code extract from NavigationDrawer

  computed: {
    ...mapState({
      productionType: state => state.productionType,
      // selectable items
      items: state => state.schema.selectProductionType.items
    }),
    computedRoutes() {
      this.buildRoutes();
      return this.$router.options.routes.filter(
        route => route.meta.display === false
      );
    }
  },
  methods: {
    buildRoutes() {
      this.productionType.forEach(
        item =>
          (this.$router.options.routes.find(
            val => val.meta.title === item
          ).meta.display = false)
      );
      this.items
        .filter(item => !this.productionType.includes(item))
        .forEach(
          item =>
            (this.$router.options.routes.find(
              val => val.meta.title === item
            ).meta.display = true)
        );
    }
  }

Leave a comment