How to pass json object in Vuejs?

Question

<template>
  <div id="app">
    <div id="bee-plugin-container"></div>
  </div>
</template>

<script>
  // import axios from "axios";
  // import Bee from "@mailupinc/bee-plugin";
  import $ from 'jquery'
  export default {
    name: "App",
    data() {
      return {
        info: null,

      };
    },
    mounted() {
      var bee;

      var endpoint = "https://auth.getbee.io/apiauth";
      var payload = {
        client_id: "<client>", // Enter your client id
        client_secret: "smesVY4mhFdfxvgF", // Enter your secret key
        grant_type: "Basicbmdll" // Do not change

      };
      $.post(endpoint, payload)
        .done(function(data) {
          var token = data;
          // continue initialization here...
          console.log('token: ', data);
          // Define a simple BEE Plugin configuration...
          var config = {
            uid: token.userName,
            container: 'bee-plugin-container',
            language: "en-US",
            // eslint-disable-next-line
            onSave: (jsonFile, htmlFile) => {
              // eslint-disable-next-line
              const params = {
                layout_json: jsonFile,
                layout_html: htmlFile,
                campaign_id: 1,
              };
              console.log('saving...', params);
            },
          }
          window.BeePlugin.create(token, config, function(instance) {
            bee = instance;
            // You may now use this instance...

            var template = {
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
              // Any valid template, as JSON object
            };

            bee.start(template);
          });

        });

    }
  };
</script>
<style>

</style>

I made an api call, to call the bee-plugin instance. where i need to pass the json object, I have no clue like where i need to pass the json obj.

below is the code where the api call is working fine, but issue is with how to pass json obj.

var template = {
              // Any valid template, as JSON object
              
            };

            bee.start(template);

Codesandbox link:- https://codesandbox.io/s/bee-plugin-in-vuejs-rjn99?file=/src/App.vue

Why not save the template in your public/static folder and fetch it ? — Mohib Arshi
– Mohib Arshi, Commented Oct 6, 2021 at 5:05
@MohibArshi This is my codesandbox link codesandbox.io/s/bee-plugin-in-vuejs-rjn99?file=/src/App.vue — T dhanunjay
– T dhanunjay, Commented Oct 6, 2021 at 5:26
@MohibArshi The Api call is working fine but, bee instance is not calling — T dhanunjay
– T dhanunjay, Commented Oct 6, 2021 at 5:26
I don't see any initialization of bee plugin anywhere. In its docs you can see we have this code const beeTest = new Bee(); beeTest.getToken(clientId, clientSecret) — Mohib Arshi
– Mohib Arshi, Commented Oct 6, 2021 at 5:52
Yes that's right. if possible can u help me with some code. So that it will useful for me. — T dhanunjay
– T dhanunjay, Commented Oct 6, 2021 at 5:56

Mohib Arshi · Accepted Answer · 2021-10-06 06:25:58Z

2

You have to initialize the Bee plugin and create its instance. And use the instance to start the template as per the docs. You may do so on the mounted method.

mounted(){
  const beeInstance = new Bee();

  const config = {}; // Your configs
  const template = {}; // Your template

  // ...

  beeInstance
    .getToken(payload.client_id, payload.client_secret)
    .then(() => beeInstance.start(config, template));
}

Here is the link to the working codepen.

edited Oct 6, 2021 at 6:25

answered Oct 6, 2021 at 6:13

Mohib Arshi

8305 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass json object in Vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related