Vue.js Parse JSON String

 
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
​
    <body>
      <div id="app">
        <h3>Vue Js JSON.parse() Method</h3>
        <p>Convert json string to json object in Vue Js</p>
        <button @click="myFunction">click me</button>
        <p>{{result.firstName}}</p>
        <p>{{result.lastName}}</p>
        <p>{{result.role}}</p>
      </div>
      <script type="module">
        import { createApp } from "vue";
        createApp({
          data() {
            return {
              str: '{"firstName":"Andrw","lastName":"Roy","role":"Developer"}',
              result: {},
            };
          },
          methods: {
            myFunction() {
              this.result = JSON.parse(this.str);
            },
          },
        }).mount("#app");
      </script>
    </body>
  </head>
</html>
​