Right way to pass and store data from Laravel to Vue

Question

I'm not used to Vue components. My second problem is, I wanted to pass data from laravel blade, to vuejs component in the right way. Because what I did is I store it to props, then pass the props into the data property, like this:

//ticket blade

<ticket-create :menu-categories-prop="{{ json_encode($menuCategories) }}"></ticket-create>

//ticket component

export default {
    props: ['menuCategoriesProp'],
    created(){
        this.menuCategories = this.menuCategoriesProp;
    },
    data() {
        return {
            menuCategories: [],
        }
    }
}

now I have menuCategoriesProp and menuCategories data, which is kinda redundant. Am I doing it wrong?

No, your method is fine. Typically with Vue, you would only need to store a prop in data when you wish the child of what you're passing the prop into wants to mutate the prop. So for example, if you want to mutate any data inside the <ticket-create /> then its best to store it in data, otherwise, you should be fine with just using the prop alone. vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow — GBWDev

IlGala IlGala · Accepted Answer · 2019-09-23T08:07:46

It is not a redundancy problem, it's a logic problem. You should not pass ANY variable from blade to view in my opinion. You should do something like this:

Your controller (maybe from the index method) checks if the request wants a JSON response, if not returns the view, otherwise the collection as a JSON response (go on to understand why).
When the view is loaded, VueJs loads the component and (this is how I do it) within the mounted method you make an Ajax call (maybe with axios) to your controller which will return the collection

In this way you have an asynchronous request management, that will allow you to refresh the data, and avoid to reload the page each time.

As I wrote before, I would avoid as much as possible to pass properties from blade to vue, unless they're context variables like user preferences or system settings.

Right way to pass and store data from Laravel to Vue

2 Answers