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

score 1 · Accepted Answer · answered Dec 05 '16 at 09:11

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>

answered Dec 05 '16 at 09:11

Hammerbot

15,696
9
61
103

And then in my input I'd do `:prop="title"`? – Jan Henckens Dec 05 '16 at 11:35
@Jannemans take a look at the [guide](https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props) – JJPandari Dec 06 '16 at 01:50
Yep, got it! Next question coming up though :) – Jan Henckens Dec 06 '16 at 10:40

Use controller data in Vue component

1 Answers1