I am trying to pass json data via html attribute in vue.js.
<div id="app" data-number="2" data-json="{"name":"John", "age":30, "car":null}"></div>
in my main.js file
new Vue({
el: `#app`,
render: h => h(App,{
props:{
myNumber: this.dataset.number,
myData: this.dataset.json
}
})
})
if I do console log for console.log(this.dataset.number) I get 2 which is correct but when I do console log for myData I just get { and it doesnt get the right json data. Any idea how to pass jason data to vue instance?
First one is binding data,
<div id="app" data-number="2" :data-json="{"name":"John", "age":30, "car":null}"></div>
or
<div id="app" data-number="2" v-bind:data-json="{"name":"John", "age":30, "car":null}"></div>
Second one is stringifying the json. You can use JSON.stringify() before send it as prop. After that you can parse in component via JSON.parse(),
new Vue({
el: `#app`,
render: h => h(App,{
props:{
myNumber: JSON.stringify(this.dataset.number),
myData: JSON.stringify(this.dataset.json)
}
})
})
The quotes are the problem. But better bind the varaibles as @Batuhan has already said correctly.
<div id="app" data-number="2" data-json="{'name':'John', 'age':30, 'car':null}"></div>
// or
<div id="app" data-number="2" data-json='{"name":"John", "age":30, "car":null}'></div>