Idiomatic way to handle navigation?

Hi Evan and crew –

Truly remarkable product. I’ve worked with computed for 30 years and this is one of the best things I’ve encountered.

I’ve run into an issue recently where a computed navigation isn’t updating. Trying to understand the recommended course of action/idiomatic way of handling.

The Setup

1. Router encapsulates App
2. App contains NavBar and RouterView
3. RouterView is populated with Pages
4. The NavBar varies somewhat page to page

<app>
  <nav-bar></nav-bar>
  <router-view></router-view>
</app>

I’m currently keeping the NavBar separate from the page as a) I would like it to remain a fixture even as routes are changed, and b) it’s concerns are somewhat separate from the page.

The Nav Items

Each Page contains NavItems it would like to append. When the Page is loaded, it emits an event, which allows the App to bind to certain of the pages properties (including navItems). The App’s navItems are bound to the NavBar via a prop.

The Problem

For some Pages, navItems is a computed property (dynamic), which precedents. When the precedents are updated, the computed navItems is not recalculating.

Ideally I’d like to keep the navItems attached to the Page, and the NavBar attached to the App (as a reusable component). Nonetheless, I’m open to restructuring if there are more appropriate ways of handling.

Thanks!

Brandon

[yyx990803]

Hi Brandon, thanks for the interest, however GitHub issues are used for bug reports and feature requests. Please move discussions to the forum instead.

[brandoncarl]

Apologies - wasn’t sure if this was intended behavior or not, but I’ll reserve this for known bugs only going forward.

On May 23, 2016, 15:40 -0400, Denis [e-mail], wrote:

If you can reproduce the issue, then feel free to file it.

A hacky solution to the original issue:https://jsfiddle.net/simplesmiler/xto1h4k4/4/ An idiomatic solution would be to define a set of possible nav items strategies, and to use vuex (or other state container) to store current strategy and necessary data for it.

Was about to close the issue, but Evan was faster.

— You are receiving this because you authored the thread. Reply to this email directly orview it on GitHub(https://github.com/vuejs/vue/issues/2939#issuecomment-221073325)