I am new in vue. I am passing props from laravel to vue but got below error. Please guide me where i am wrong.
<jobs-component :countriesList="'{{$country_list}}'" :jobsRoute="'{{route('jobListing')}}'"></jobs-component>
export default {
props: ["jobsroute", "countriesList"],
components: {
JobFilter
},
data() {
return {
jobs: [],
axiosConfig: {
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
}
};
},
created() {
console.log(countriesList);
this.fetchJobs();
},
methods: {
fetchJobs() {
axios.post(this.jobsroute).then(response => {
this.jobs = response.data.data;
});
}
}
};
Any solution appreciated!
My Answer:
In your Vue component, you should access props using `this` keyword. So, instead of `countriesList`, you should use `this.countriesList` to access the prop value.
Here is the corrected code:
javascript
export default {
props: ["jobsRoute", "countriesList"],
components: {
JobFilter
},
data() {
return {
jobs: [],
axiosConfig: {
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
}
};
},
created() {
console.log(this.countriesList);
this.fetchJobs();
},
methods: {
fetchJobs() {
axios.post(this.jobsRoute).then(response => {
this.jobs = response.data.data;
});
}
}
};
Also, make sure that the prop names in the Vue component match the prop names passed from Laravel. In your case, `countriesList` and `jobsRoute` should match the prop names in the Vue component.
Rate this post
4 of 5 based on 8932 votesComments