CODEWITHSUNDEEP
vue.js
Martyn
Martyn

Reputation: 6383

Vue passing props to route components

I'm trying to pass data from the Vue instance through to components through router. I've tried to following along the docs and examples in stack overflow but can't get it to work.. I'm trying to pass a prop called "funds", below is my scripts and components:

main.js

new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  data: {
    funds: [...]
  },
  template: '<App :funds="funds"/>'
});

App.vue 

<template>
  <div id="app">
    ...
    <router-view :funds="funds" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

Vue.use(Router)

export default new Router({
 routes: [
   ...
   {
     path: '/funds',
     name: 'funds',
     component: List
   }
 ]
})

List.vue

<template>
  <div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="fund in funds" :key="fund.name">
          ...
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'List',
    props: ['funds']
  }
</script>

I am seeing a warning in the console:

[Vue warn]: Property or method "funds" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

found in

---> <App> at src/App.vue
       <Root>

However, when I run this I don't see any rows in the table being rendered, in fact the table is just empty (only header). Am I missing something in the chain?

Upvotes: 1

Views: 87

Answers (1)

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3147

In App.vue, You need to add props too as shown below;

<template>
  <div id="app">
    ...
    <router-view :funds="funds" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    props: ['funds']
  }
</script>

Vue.use(Router)

export default new Router({
 routes: [
   ...
   {
     path: '/funds',
     name: 'funds',
     component: List
   }
 ]
})

Upvotes: 1

Related Questions