如何通过html属性将json数据传递给Vue

Question

我试图通过vue.js中的html属性传递json数据。

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

在main.js文件

new Vue({
el: `#app`,
render: h => h(App,{
props:{
myNumber: this.dataset.number,
myData: this.dataset.json
}
})
})

如果我为console.log(this.dataset.number)做控制台日志，我得到2，这是正确的，但当我为myData做控制台日志时，我只得到{，它没有得到正确的json数据。知道如何将jason数据传递给value实例吗?

Answer 1

引号是问题所在。但是最好像@Batuhan已经说过的那样绑定变量。

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

Answer 2

第一个是binding数据，

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

第二个是字符串化json。您可以在将其作为道具发送之前使用JSON.stringify()。之后，您可以通过JSON.parse()，

来解析组件。

new Vue({
el: `#app`,
render: h => h(App,{
props:{
myNumber: JSON.stringify(this.dataset.number),
myData: JSON.stringify(this.dataset.json)
}
})
})