How to define property with a component?

Question

I currently have three steps in a form that I want to show sequentially, so I created three components - one for each step of the process.

My app.js file:

import LocationList from './components/LocationList.vue';
import ChooseTime from './components/ChooseTime.vue';
import ChooseMethod from './components/ChooseMethod.vue';

Vue.component('location-list', LocationList);
Vue.component('choose-time', ChooseTime);
Vue.component('choose-method', ChooseMethod);

let store = {
    isVisible: {
        steps: {
            one: true,
            two: false,
            three: false,
        }
    }
};

new Vue({
    el: '#app-order',

    data: store,

    router
});

Now, when my one and only route is called,

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/order',
        component: require('./views/Order.vue')
    }
];

export default new VueRouter({
    routes
});

all these components are being loaded properly. The issue is that when I try to v-show them one at a time:

Order.vue:

<template>

    // ...

    <location-list v-show="isVisible.steps.one"></location-list>
    <choose-time v-show="isVisible.steps.two"></choose-time>
    <choose-method v-show="isVisible.steps.three"></choose-method>

    // ...

</template>

<script>
</script>

<style>
</style>

The error message I receive is:

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

But when I check within Vue's browser extension, isVisible is defined within the root element?

As you can see it is in the root-element, but not inside the Order view though.

Thanks for any help!

Answer 1

In Vue, child components do not have direct access to data defined in their parents. You have to pass the data down.

I think you would probably save yourself a little trouble if you just defined isVisible in Order.vue. However, if you want to leave it where it is, you need to pass it into the component.

One easy way to do that is to define isVisble as a property of Order.vue and then pass it through your router-view.

<router-view :is-visible="isVisible"></router-view>

There are other ways of passing props to routes that are defined in the router documentation.

The reason I say you would save your self some trouble defining isVisible in Order.vue is because whenever you want to change the values of your steps, you will need to do it at the root as you currently have it defined.