Working with Laravel Spark, I have implemented a component within another component.
<parent-component :user="user">
<child-component :user="user" :questions="questions"></child-component>
<parent-component>
Inside the parent component, I have a data method containing questions data:
props: ['user'],
data(){
return {
questions: {
// these values are set in another method within this file
},
}
},
As shown, I have passed :questions to the child component in order to utilize the questions within that component for looping purposes.
Within the JavaScript file for the child component, I have:
props: ['user', 'questions'],
However, when attempting to access the questions, I am only receiving a default object unlike the user data which contains all the relevant information.
Could you please provide guidance on the correct approach to resolving this issue, as I am currently only guessing...
Below is the JavaScript file for the child component:
Vue.component('control-question-navigation', {
props: ['user', 'questions'],
data() {
return {
//
}
},
methods: {
},
mounted() {
var $this = this;
console.log($this.questions); // returns standard object
console.log($this.user); // correctly returns user data
}
});