1

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

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

javascript.html

<script>
function initializeVue(values){

const app = {
  data(){
    return {
      lists: values
    }
  }
}

Vue.createApp(app).mount(‘#app’)

}

google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();

</script>

code.gs

function getSpreadsheetValues()
{
  return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
}

1 件の回答 1

0

クライアント側Javascriptでいろいろ試していますが、二次元配列がObject型?になるのか、v-forで回せません。ベタ打ちの配列を返すと動作するのような状況から、SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues()の値にDate objectが含まれている可能性を考えました。この場合、withSuccessHandlerで返されたvaluesnullになってしまいます。これは今のところ仕様のようです。Ref

そこで、次のような変更はいかがでしょうか。この変更では、getSpreadsheetValues()を下記のように変更してください。getDisplayValues()はセルの値をそのまま文字列として返します。

From:

return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();

To:

return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getDisplayValues();

Note:

  • もしも、スプレッドシートから取得した値のDate objectをJavascript側でもDate objectとして使用したい場合は、Google Apps Script側で一度文字列あるいはUnix timeに変更した後、Javascript側でDate objectに戻す操作が必要になるかと思われます。
2
  • スピーディーなご回答ありがとうございました。まさにTanaike様の仰るとおりDate型が入っておりました。Webで見つけたサンプルコードはたまたまDate型が含まれていなく、うまく動作していたようでした。
    – masa
    Commented 2022年12月6日 3:46
  • @masa ご返事ありがとうございます。Date objectが含まれると自動で戻り値全体がnullになる問題はStackoverflowでも問題になっていました。この場合、何らかのエラーメッセージを返すようにしているとユーザ側でその問題を理解しやすいのですが、今のところ、これについては変更なしのようです。
    – Tanaike
    Commented 2022年12月6日 5:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。