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 doesn't work... In DOM it's looks like <div id="my-component" prices="[object Object]"> Vue debug tool show me image as an empty string, and in console undefined

<div id="my-component" :prices="{{ $prices }}">
</div>

<script>
        new Vue({
            el: '#my-component',
            props: ['prices'],
            mounted: function() {
               console.log(this.image);
           },
       });
</script>

where $prices json encoded array.

GuyC · Accepted Answer · 2016-12-02 14:29:06Z

18

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 }})

answered Dec 2, 2016 at 14:29

GuyC

6,6141 gold badge35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xAoc Over a year ago

brilliant, this is what I was looking for!

Mihai Vilcu · Accepted Answer · 2016-12-02 13:55:12Z

2

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>

answered Dec 2, 2016 at 13:55

Mihai Vilcu

1,96718 silver badges26 bronze badges

3 Comments

xAoc Over a year ago

Yes, this is approach is working. But can it be done without extra variable?Using some binding or smth like that?

Mihai Vilcu Over a year ago

The idea is that you need to expose that information somewhere on the page. This can be done on a variable, on a data attribute etc. Using variables like this (in a namespace) makes it easy to reason about as your application grows.

xAoc Over a year ago

Yes, I understand the idea. I've asked about native, vue way. If there no way to do this in a more clear way, I will do this.

Berci · Accepted Answer · 2020-05-15 12:19:20Z

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:

you set the data in the render function (in the template)
if something triggers a re-render, the data will be set again
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.

Herz3h · Accepted Answer · 2020-10-13 12:49:44Z

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.

Collectives™ on Stack Overflow

How to pass data(json) to vue instance

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related