How to pass values to vue data from laravel blade

Question

I have a create product for and i want to fill customer_id hidden input using blade, but user can change it while he/she is on form page. How can i pass pre selected customer id to vue product data model? here is my code:

@section('content')
    <input type="hidden" name="customer_id" value="{{ $customer->id }}" v-model="product.customer" />
@endsection

This is my vue instance:

const app = new Vue({
el: '#app',
data: {
    product: {
        'customer': null,
        'title': null,
    }
},

This code will lead both customer in vue, and customer in input field to be null.

Answer 1

Your data must return an object try this syntax:

data() {
    return {
      product: {
        customer: null,
        title: null,
      }
    }
}

Answer 2

Use props for that and don't forget to json_encode($customer) when you pass it to the component.