I have a simple Vue component that I am trying to pass information into using props. The HTML code for this looks like:
<myapp v-bind:source-key="some_key" v-bind:destination-key="some_other_key"></myapp>
Here is the component code:
<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">
This is an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['sourceKey', 'destinationKey'],
mounted() {
this.$http.get('/map/' + this.sourceKey + '/' + this.destinationKey)
.then(function (response) {
console.dir(response)
})
.catch(function (error) {
console.dir(error);
});
console.log('Got here')
}
}
</script>
When trying to set the props sourceKey to some_key and destinationKey to some_other_key, I am encountering 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.
It seems like the expected value is being treated as the key. Additionally, errors indicate that the sourceKey variable was not defined:
[Vue warn]: Error in mounted hook: "ReferenceError: sourceKey is not defined"
Where should I define the props if not in the props block?