How to pass json data to Vue via html attibute-CodePudding

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?

CodePudding user response：

First one is binding data,

<div id="app" data-number="2" :data-json="{"name":"John", "age":30, "car":null}"></div>

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

CodePudding user response：

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>