Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
186
rated 0 times [  188] [ 2]  / answers: 1 / hits: 20685  / 8 Years ago, fri, december 2, 2016, 12:00:00

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.


More From » arrays

 Answers
14

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

[#59832] Wednesday, November 30, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mckaylab

Total Points: 311
Total Questions: 120
Total Answers: 93

Location: Montenegro
Member since Thu, Jun 16, 2022
2 Years ago
;