Sending JSON data to Vue using HTML attributesHere's a guide on how you can pass JSON

Question

Sending JSON data to Vue using HTML attributesHere's a guide on how you can pass JSON

How can I successfully pass JSON data via an 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
      }
    })
  })

When attempting to access the JSON data with console.log(this.dataset.number), the output is correct (2). However, when trying to access myData, only a single curly brace ({) seems to be returned. How can I properly pass JSON data to the Vue instance?

javascript vue.js

Answer 1

Answer №1

The first step involves binding data,

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

Alternatively, you can also use

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

The second step is to convert the JSON data into a string. This can be done using JSON.stringify() before passing it as a prop. Then, within the component, you can parse the string back into JSON using JSON.parse(),

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

Answer 2

The first step involves binding data,

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

Alternatively, you can also use

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

The second step is to convert the JSON data into a string. This can be done using JSON.stringify() before passing it as a prop. Then, within the component, you can parse the string back into JSON using JSON.parse(),

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

Answer 3

Answer №2

The issue lies with the quotes in this code snippet. It would be more efficient to properly bind the variables as mentioned by @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 4

The issue lies with the quotes in this code snippet. It would be more efficient to properly bind the variables as mentioned by @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>

Sending JSON data to Vue using HTML attributesHere's a guide on how you can pass JSON

Answer №1

Answer №2

Similar questions

Automatically open Bootstrap dropdown upon loading the page

Ensuring that undefined is not present before making an API request is crucial in the componentWillMount lifecycle

Receiving a 200 response code, however the controller's store() method is not being accessed

Is there a way to determine if a website is utilizing javascript?

How can I make TypeScript mimic the ability of JavaScript object wrappers to determine whether a primitive value has a particular "property"?

PhpStorm's file relocation feature now includes adding "/types" to the Vuex import statement in Vue.js files

Issues with Skrollr JS on mobile device causing scrolling problem

What is the best way to arrange an array or display it accurately?

Utilizing jQuery to correspond with CSS media queries

Maximizing efficiency in Office Automation programming by choosing individuals proficient in Javascript and PHP

Retrieve the parent document for every item within a Firebase collection group

Does Apollo in Vue take care of caching previously visited pages, or will I need to store them in my own store?

Extracting data from a JSON file with the help of Node.js

What type of information is typically stored in the idsrv cookie on IdentityServer4?

Use javascript/ajax to submit the form on a separate page

How to bring in images from a local source in a React.js file

What's causing my React app's slideshow to malfunction?

Restricting the type of user input in HTML forms

Reactive forms in Angular now support changing focus when the Enter key is pressed

It appears that there may be an unhandled promise rejection for a request with ID 0, specifically a typeerror indicating that the body