How to pass json object in Vuejs?-CodePudding

<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>

How to pass json object in Vuejs?

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

CodePudding user response：

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.