CODEWITHSUNDEEP
javascriptvue.js
Rain Man
Rain Man

Reputation: 1273

How to pass json data to Vue via html attibute

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?

Upvotes: 0

Views: 1206

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17594

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>

Upvotes: 1

Batuhan
Batuhan

Reputation: 1611

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

Upvotes: 2

Related Questions