如何在 Vuejs 中传递 json 对象？答案

【问题标题】：How to pass json object in Vuejs?如何在 Vuejs 中传递 json 对象？
【发布时间】：2021-11-26 06:42:04
【问题描述】：

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

如何在Vuejs中传递json对象？

我做了一个 api 调用，调用 bee-plugin 实例。我需要在哪里传递 json 对象，我不知道我需要在哪里传递 json obj。

下面是 api 调用工作正常的代码，但问题是如何传递 json obj。

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

            bee.start(template);

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

【问题讨论】：

为什么不将模板保存在您的公共/静态文件夹中并获取它？
@MohibArshi 这是我的代码框链接codesandbox.io/s/bee-plugin-in-vuejs-rjn99?file=/src/App.vue
@MohibArshi Api 调用工作正常，但是蜜蜂实例没有调用
我在任何地方都没有看到任何蜜蜂插件的初始化。在它的文档中你可以看到我们有这个代码const beeTest = new Bee(); beeTest.getToken(clientId, clientSecret)
是的，没错。如果可能的话，你能帮我一些代码吗？这样它对我有用。

标签： javascript jquery json vue.js axios

【解决方案1】：

您必须初始化 Bee 插件并创建它的实例。并使用实例按照docs 启动模板。您可以在 mounted 方法上这样做。

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));
}

这是工作codepen的链接。

【讨论】：