Estoy tratando de pasar datos json a través del atributo html en vue.js.
<div id="app" data-number="2" data-json="{"name":"John", "age":30, "car":null}"></div>
en mi archivo main.js
new Vue({ el: `#app`, render: h => h(App,{ props:{ myNumber: this.dataset.number, myData: this.dataset.json } }) })
si realizo el registro de la consola para console.log(this.dataset.number)
obtengo 2, que es correcto, pero cuando realizo el registro de la consola para myData
solo obtengo {
y no obtiene los datos json correctos. ¿Alguna idea de cómo pasar los datos de jason a la instancia de vue?
El primero es datos binding
,
<div id="app" data-number="2" :data-json="{"name":"John", "age":30, "car":null}"></div>
o
<div id="app" data-number="2" v-bind:data-json="{"name":"John", "age":30, "car":null}"></div>
El segundo es encadenar el json. Puede usar JSON.stringify()
antes de enviarlo como accesorio. Después de eso, puede analizar el componente a través JSON.parse()
,
new Vue({ el: `#app`, render: h => h(App,{ props:{ myNumber: JSON.stringify(this.dataset.number), myData: JSON.stringify(this.dataset.json) } }) })
Las comillas son el problema. Pero es mejor vincular las variables como @Batuhan ya ha dicho correctamente.
<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>