92597


Google Apps ScriptでVue3でテストアプリを作成しています。

クライアント側Javascriptでいろいろ試していますが、二次元配列がObject型？になるのか、v-forで回せません。どのように渡すと良いのでしょうか？  
ベタ打ちの配列を返すと動作するので、CDN等の設定は問題ないとしてアドバイスをいただければと思います。

javascript.html

[code]

    <script>
    function initializeVue(values){
    
    const app = {
      data(){
        return {
          lists: values
        }
      }
    }
    
    Vue.createApp(app).mount(‘#app’)
    
    }
    
    google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();
    
    </script>
    
[/code]

code.gs

[code]

    function getSpreadsheetValues()
    {
      return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
    }
    
[/code]


CC BY-SA 4.0
2022-12-05T23:27:59.583
92595
2022-12-06T01:23:23.650
2022-12-06T00:12:32.513
3060
44556
question
javascript google-apps-script vue.js
Vue3に二次元配列を渡す方法


`クライアント側Javascriptでいろいろ試していますが、二次元配列がObject型？になるのか、v-forで回せません。`、`ベタ打ちの配列を返すと動作する`のような状況から、`SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues()`の値にDate
objectが含まれている可能性を考えました。この場合、`withSuccessHandler`で返された`values`は`null`になってしまいます。これは今のところ仕様のようです。[Ref](https://developers.google.com/apps-
script/guides/html/communication#parameters_and_return_values)

そこで、次のような変更はいかがでしょうか。この変更では、`getSpreadsheetValues()`を下記のように変更してください。[`getDisplayValues()`](https://developers.google.com/apps-
script/reference/spreadsheet/range#getdisplayvalues)はセルの値をそのまま文字列として返します。

#### From:

[code]

    return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
    
[/code]

#### To:

[code]

    return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getDisplayValues();
    
[/code]

### Note:

  * もしも、スプレッドシートから取得した値のDate objectをJavascript側でもDate objectとして使用したい場合は、Google Apps Script側で一度文字列あるいはUnix timeに変更した後、Javascript側でDate objectに戻す操作が必要になるかと思われます。


CC BY-SA 4.0
2022-12-06T01:23:23.650
92597
2022-12-06T01:23:23.650
19460
92595
answer