How to pass data(json) to vue instance

Question

I have a simple Vue instance and want to pass json from the backend to vue without HTTP request because it\'s always the same.

I\'ve tried do this with props, but it

Answer 1

Your solution was nearly there but you don't need a prop, rather use a data attribute and assign the JSON via a method:

new Vue({
    el: '#app',
    data: {
        json: {},
    },
    methods: {
    	setJson (payload) {
        	this.json = payload
        },
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app" :json="setJson({ foo: 'bar' })">
    <pre>{{ json }}</pre>
</div>

You would just assign your Laravel data to the setJson methods payload, i.e.

:json="setJson({{ $prices }})

Answer 2

I have upvoted this answer first, but I have to change my vote (can't do it actually not enough reputation...).

Please do not set the data this way, because it will trigger an error like this: [Vue warn]: You may have an infinite update loop in a component render function

If anything will use the data you set this way (watch, render components based on it) you will have an infinite loop.

When you use this method:

1. you set the data in the render function (in the template)
2. if something triggers a re-render, the data will be set again
3. anything using this data will have to re-render, which may cause a re-render on the main vue instance

This will cause the infinite loop.

LinusBorg have an explanation here.

Answer 3

I don't know if there is any Laravel helper for this but I will present a generic approach.

One option would be to store you JSON data in a global variable and the page loads and then use it in your js files.

Basically you need to generate some html similar to:

<script>
window.myApp = window.myApp || {};
window.myApp.userData = { "firstName": "John", "lastName": "Doe" };
</script>

Then from javascript you should be able to access the myApp.userData variable and use it when initializing the Vue component.

new Vue({
    el: '#app',
    data: {
        userData: myApp.userData
    }
});

Here is an example:

new Vue({
  el: '#app',
  data: {
    userData: myApp.userData
  }
});

<script>
  window.myApp = window.myApp || {};
  window.myApp.userData = { "firstName": "John", "lastName": "Doe" };
</script>


<div id="app">
  Hello {{userData.firstName}}
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Answer 4

While this op is old, here is how I would do it (inspired by how I do it in Symfony 4 + VueJS):

<div id="my-component" prices-data="{{ json($prices) }}">
</div>

<script>
        new Vue({
            el: '#my-component',
            props: ['pricesData'],
            data: {
               prices: null,
            },
            mounted: function() {
               this.prices = JSON.parse(this.pricesData);
           },
       });
</script> 

This is obviously assuming that $prices is a blade variable.

Note: I used @json() above when $prices is a simple object that can be encoded with json_encode() (underlying function being used when you call blade json function. If however the object is complex, consider using JMS Serializer with @MaxDepth annotations if objects become too complex.