如何在 Vuejs 中传递 json 对象？

Posted 2023-02-22

【中文标题】如何在 Vuejs 中传递 json 对象？

【英文标题】：How to pass json object in Vuejs?

【发布时间】：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)

是的，没错。如果可能的话，你能帮我一些代码吗？这样它对我有用。

【参考方案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的链接。