passing props into vue2 component

Question

I have a very simple vue component I'm using that I want to pass information into via props. In the HTML it looks like:

<myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>

The component looks like this:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['sourceKey', 'destinationKey'],
        mounted() {
            this.$http.get('/map/' + sourceKey + '/' + destinationKey)
                .then(function (response) {
                    console.dir(response)
                })
                .catch(function (error) {
                    console.dir(error);
                });
            console.log('got here')
        }
    }
</script>

I'd expect this would set the props sourceKey equal to some_key and destinationKey equal to some_other_key in the component, but I'm getting errors:

[Vue warn]: Property or method "some_key" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

So it seems like the expected value is being treated as the key? Then there's more errors saying that the sourceKey variable was never defined:

[Vue warn]: Error in mounted hook: "ReferenceError: sourceKey is not defined"

Where do I define the props, if not in the props block?

Answer 1

Here: this.$http.get('/map/' + sourceKey + '/' + destinationKey)

In <script> , you need to access this.sourceKey and this.destinationKey , to specify you want the properties off the Vue instance (and not variables defined elsewhere). You can only leave off this. in templates.

As for your first error, make sure some_key and some_other_key are variables defined in your Vue instance, under data() { ... } , computed properties, and so on, as the error message suggests.

Answer 2

In parent's template:

<myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>

You get the error:

[Vue warn]: Property or method "some_key" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

Because the parent does not have some_key in its data() .

In child:

[Vue warn]: Error in mounted hook: "ReferenceError: sourceKey is not defined"

You get an error because inside the Vue instance functions, the prop s must be referenced using this .

See a demo correcting both errors below.

 Vue.component('myapp', { template: "#myAppTemplate", props: ['sourceKey', 'destinationKey'], mounted() { this.$http.get('/map/' + this.sourceKey + '/' + this.destinationKey) // this fixes "ReferenceError: sourceKey is not defined" .then(function(response) { console.dir(response) }) .catch(function(error) { console.dir(error); }); console.log('got here') } }) new Vue({ el: '#app', data: { some_key: 'aaa', // this fixes [Vue warn]: Property or method "some_key" is not defined some_other_key: 'bbb' // this fixes [Vue warn]: Property or method "some_other_key" is not defined } });

 <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.4.0"></script> <div id="app"> <myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp> </div> <template id="myAppTemplate"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template>