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>