How to pass json data to Vue via html attibute

Question

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?

Batuhan · Accepted Answer · 2021-10-16 18:20:02Z

2

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

answered Oct 16, 2021 at 18:20

Batuhan

1,62113 silver badges30 bronze badges

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

Comments

Maik Lowrey · Accepted Answer · 2021-10-16 18:23:11Z

1

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>

answered Oct 16, 2021 at 18:23

Maik Lowrey

17.8k7 gold badges54 silver badges101 bronze badges

1 Comment

Rain Man Over a year ago

thanks, the problem was with the quotes. If I do v-bind: or : I get undefined, not sure why

Collectives™ on Stack Overflow

How to pass json data to Vue via html attibute

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related