#StackBounty: #vue.js #vuetify.js #vue-router Vuetify Tabs as Nested dynamic routes erroring on parent prop

Bounty: 500

Trying to make a Vuetify Tab component with nested routes for the tab panels, based off a dynamic route.

Starting HTML of

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <router-link to="/parent/123">Go To Parent</router-link>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</div>

with components of

const Parent = {
template: '<div><h1>Hello from parent <em>{{obj.name}}</em></h1>' +
    '<v-tabs>' +
        '<v-tab to="child1">child1</v-tab>' +
        '<v-tab to="child2">child2</v-tab>' +
        '<v-tab to="child3">child3</v-tab>' +   
    '</v-tabs>' +    
    '<router-view></router-view>' +
    '</div>',
    props: { obj : {type: Object, required: true}}
};

const Child1 = {
template: '<h3>Child1</h3>'
};
const Child2 = {
template: '<h3>Child2</h3>'
};
const Child3 = {
template: '<h3>Child3</h3>'
};

and a router configuration of

const routes = [{
    path: '/parent/:id',
    component: Parent,
    props: true,    
    beforeEnter: function (routeTo, routeFrom, next) {
        routeTo.params.obj = mockObj;
      next();
    },
    children:[
    {    
        path: 'child1',      
      component: Child1    
    },
    {
        path: 'child2',
      component: Child2
    },
    {
        path: 'child3',
      component: Child3
     }    
    ]    
  }

does all sort of work, to the extent that clicking on each tab does navigate to child route correctly (as in if I remove the prop of [obj] all works, although I couldn’t get the fiddle to reproduce this, but I can locally. The fiddle is not passing through the dynamic route param in the child routes and I don’t know why) but as soon as I put the parent obj prop in they all error with vue.runtime.esm.js:639 [Vue warn]: Missing required prop: "obj" found in Parent when navigating to the children.

The obj is just used as a placeholder example, in the actual implementation obj is pulled from an API in the route guard beforeEnter and passed into the props. In this example its just var mockObj = {name: "Steve"}, so the parent component says ‘Hello from parent steve

I’m fairly new to Vue.js and Vuetify and just don’t understand whats going on here, but it appears when navigating to the child routes its running the parent!?

Fiddle here


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.