如何从laravel传递vue中的道具？

Question

我是 vue 新手。我正在将道具从 laravel 传递到 vue，但出现以下错误。请指导我哪里错了。

<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;
            });
        }
    }
};

感谢任何解决方案！

Answer 1

你也可以在 Laravel 的 JSON 响应中返回对象：

return response()->json(Country::get());

文档：https://laravel.com/docs/8.x/responses#json-responses

Answer 2

我自己发现了错误

之前

 $country_list = Country::get();

之后

 $country_list = Country::get()->toJson();