How to use Vue instance data in components?

Question

I defined some data in a vuejs instance, but when I use the data, I receive this message:

Property or method "url" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

This is where the data is located:

Vue.component('app-dashboard', require('./components/AppDashboard.vue'));
Vue.component('header-top', require('./components/Header.vue'));
Vue.component('navbox', require('./components/Navbox.vue'));
Vue.component(Vodal.name, Vodal);

const app = new Vue({
    el: '#app',
    data: {
      url: {
        dashboard: laroute.route('dashboard'),
        request: laroute.route('requests.get'),
        send: laroute.route('requests.send'),
        history: laroute.route('history'),
        userAll: laroute.route('users.all')
      }
    }
});

This is how I use the data in my component:

// Header.vue
    <li class="nav-item active">
          <a class="nav-link" :href="url.dashboard">Dashboard <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :href="url.request">File Request</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :href="url.send">Send Files</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :href="url.history">History</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :href="url.userAll">User Management</a>
        </li>

Use Vuex. Its far better than props, cleaner, more readable. — user6748331
– user6748331, Commented Jul 25, 2017 at 20:01

tony19 · Accepted Answer · 2022-07-15 23:04:22Z

2

In Vue, children do not have access to their parent's data directly, you need to pass it down as a property.

In your Header.vue component you should define a property called url

export default {
  props:["url"],
  ...
}

and pass the value in the parent's template.

<header-top :url="url"></header-top>

The Vue documentation is excellent. You should read through component composition.

edited Jul 15, 2022 at 23:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 25, 2017 at 19:28

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Vue instance data in components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related