时间戳

首页 > 解决方案 > 如何将数组对象参数从 vue 网站传递给 google appscript 以设置 google 电子表格列值

vue.js - 如何将数组对象参数从 vue 网站传递给 google appscript 以设置 google 电子表格列值

问题描述

首先，我通过 vue 创建一个网站，并将参数传递给我的 google appscript

vue函数

    var appurl = "my google appscript url"
    this.$http.get(appurl, {
      params: {
        settingLink: this.settingLink,
        albumLink: this.albumLink,
        stepControl: this.stepControl,
        nav: this.navSetting,
      }
    }).then(response => {
      console.log(response);
    })

我将参数发送到谷歌 appscript

我的谷歌应用脚​​本

  function doGet(e) {
  var params = e.parameter;
  var settingLink = params.settingLink;
  var albumLink = params.albumLink;
  var stepControl = params.stepControl;
  var nav = params.nav;
  var SpreadSheet = SpreadsheetApp.openByUrl(settingLink);
  var SheetName = SpreadSheet.getSheetByName("gameSetting");
  SheetName.getRange("D2").setValue(stepControl);
  SheetName.getRange("E2").setValue(albumLink);
  SheetName.getRange("F2").setValue(nav[0].style);
  SheetName.getRange("G2").setValue(nav[1].style);
  SheetName.getRange("H2").setValue(nav[2].style);
  }

参数 albumLink 和 stepControl 是字符串，所以我成功将它推送到我的电子表格（图 1）

但 nav 是一个数组对象，如（在 vue 数据中）

nav=[
     {style:"red",content:"test"},
     {style:"blue",content:"test"},
     {style:"green",content:"test"},
    ]

我怎么能让电子表格 F2 为“红色”，G2 为“蓝色”，H2 为“绿色”

图 1 在此处输入图像描述

标签： vue.jsgoogle-apps-script

解决方案

通过检查 的输出JSON.stringify(e)，似乎对象的每个属性都变成了不同的参数，并以如下方式接收：

{
  "queryString": "settingLink=settingLinkTest&albumLink=albumLinkTest&stepControl=stepControlTest&nav%5B0%5D%5Bstyle%5D=red&nav%5B0%5D%5Bcontent%5D=test&nav%5B1%5D%5Bstyle%5D=blue&nav%5B1%5D%5Bcontent%5D=test&nav%5B2%5D%5Bstyle%5D=green&nav%5B2%5D%5Bcontent%5D=test",
  "contextPath": "",
  "parameters": {
    "nav[1][style]": [
      "blue"
    ],
    "nav[1][content]": [
      "test"
    ],
    "albumLink": [
      "albumLinkTest"
    ],
    "nav[2][style]": [
      "green"
    ],
    "settingLink": [
      "settingLinkTest"
    ],
    "nav[2][content]": [
      "test"
    ],
    "nav[0][style]": [
      "red"
    ],
    "stepControl": [
      "stepControlTest"
    ],
    "nav[0][content]": [
      "test"
    ]
  },
  "contentLength": -1,
  "parameter": {
    "nav[2][content]": "test",
    "nav[1][content]": "test",
    "albumLink": "albumLinkTest",
    "settingLink": "settingLinkTest",
    "nav[0][style]": "red",
    "stepControl": "stepControlTest",
    "nav[0][content]": "test",
    "nav[1][style]": "blue",
    "nav[2][style]": "green"
  }
}

由于特定导航的索引及其属性成为参数名称，因此您可以通过将 doGet() 更改为：

SheetName.getRange("F2").setValue(params["nav[0][style]"]);
SheetName.getRange("G2").setValue(params["nav[1][style]"]);
SheetName.getRange("H2").setValue(params["nav[2][style]"]);

或者，正如问题评论中所建议的，您可以在发送导航对象时对其进行字符串化：

this.$http.get(appurl, {
          params: {
            settingLink: settingLink,
            albumLink: albumLink,
            stepControl: stepControl,
            nav: JSON.stringify(nav)
          }
        }).then(response => {
          console.log(response);
        })

然后在您收到它时进行解析以按预期使用：

var nav = JSON.parse(params.nav);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);

推荐阅读