Use controller data in Vue component

Question

I'm building an app with Laravel (Spark) and Vue.

The user can create an entry: form on the left, preview on the right, using v-model to bind the preview to the inputs. That works

Now, when the user edits an existing entry, I get the entry in question and pass it on to the view like so:

return view('app/form/edit', array('form' => $form));

And here's my component:

Vue.component('create-form', {
        props: ['user'],

    data: function() {
        return {
            title: "",
            description: ""
        };
    },

});

Now, my question: how do I access the $form variable in my Vue component?

Most question I see related to this are either iterating over a loop or pull in data with Ajax (I already have the data on the page so I don't think that's the way to go here).

Any advice on how to proceed would be greatly appreciated :) Thanks Jan

Answer 1

here what I do on such cases:

If it is a model:

<my-component :prop="{{ $some_model->toJson() }}"></my-component>

If it is a simple array:

<my-component :prop="{{ json_encode($some_array) }}"></my-component>