こちらの記事は
GASとVueでサーバレス社内チーム向け工数管理

の詳細記事その③です。
前回はVueからGASを呼び出してスプレッドシートのデータをプルダウンに入れるところまでを実装しました。

今回は初期データの「クライアント」シートから出来ている配列が入ったプルダウンで、
値が選ばれたらその値に紐づいた「プロジェクト」シートの該当する横セルを配列で取得。
同様に「プロジェクト」シートから出来ている配列が入ったプルダウンで、
値が選ばれたらその値に紐づいた「案件」シートからの配列を取得。

までを実装進めます。

GAS

///////引数からプロジェクトを配列で取得
function findProjectList(val){
  var spreadSheetID = "スプレッドシートID";
  var sheetName = "プロジェクト";
  var dat = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getDataRange().getValues(); //受け取ったシートのデータを二次元配列に取得
  // 引数のクライアント名がある行を取得
  for(var i=0;i<dat.length;i++){
    if(dat[i][0] === val){
      var clientRow = i+1;
    }
  }
  //getRangeで引数がある行の2列目から10列目まで取得
  var res = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getRange(clientRow, 2, 1, 10).getValues();
  //２次元配列にする
  res = Array.prototype.concat.apply([], res);
  //空白の配列を除去
  res = res.filter(function(e){return e !== "";});
  return res;
}
///////引数から案件を配列で取得
function findCaseList(val,val2){
  var spreadSheetID = "スプレッドシートID";
  var sheetName = "案件";
  var dat = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getDataRange().getValues(); //受け取ったシートのデータを二次元配列に取得
  var _clientArray = [];
  //クライアント名が重複するため、引数1の同名のクライアント名があるセルの行を配列に入れる
  for(var i=0;i<dat.length;i++){
    if(dat[i][0] === val){
     _clientArray.push(i);
   }
  }
  //引数１のクライアント名と 引数２のプロジェクト名がある行を取得
  for(var i=0;i<_clientArray.length;i++){
    var _i = _clientArray[i];
    if(dat[_i][1] === val2){
      var projectRow = _i+1;
      break;
    }
  }
  //getRangeで引数１,2がある行の３列目から10列目まで取得
  var res = SpreadsheetApp.openById(spreadSheetID).getSheetByName(sheetName).getRange(projectRow, 3, 1, 10).getValues();
  //２次元配列にする
  res = Array.prototype.concat.apply([], res);
  //空白の配列を除去
  res = res.filter(function(e){return e !== "";});
  return res;
}

index.html

<select v-model="selected" id="client01">
    　クライアント:<option v-for="row in clientArray">{{ row }}</option>
    </select>
    <select v-model="selected02" id="project01">
     　プロジェクト：<option v-for="item in projectArray">{{ item }}</option>
    　</select>
     <select v-model="selected03" id="anken01">
      案件：<option v-for="item in ankenArray">{{ item }}</option>
     </select>

js.html

<script>
var vm = new Vue({
    el: "#app",
    data: {
     message:'Welcome Vue!',
     clientArray: [],
     projectArray: [],
     ankenArray: [],
     selected:'',
     selected02:'',
     selected03:''
    },
    watch:{
       selected:function(now){
       //選ばれたクライアントに紐づいたプロジェクトリストを取得するGAS関数を発火させる。成功すればgetProjectList関数
       google.script.run
        .withSuccessHandler(this.getProjectList)
        .withFailureHandler(function(arg){
          alert("データの取得に失敗しました。");
        }).findProjectList(now);
       },
       selected02:function(now){
       //選ばれたクライアント、プロジェクトに紐づいた案件リストを取得するGAS関数を発火させる。成功すればgetAnkenList関数
        　　this.selected03 = now;

       　　　　google.script.run
       　　　　.withSuccessHandler(this.getAnkenList)
       　　　　.withFailureHandler(function(arg){
       　　　　alert("データの取得に失敗しました。");
       　　　}).findCaseList(this.selected, now);

       }
    },
    methods: {
      // 最初のスプレッドーシートのデータインポート
      initData: function(returnData){
        this.clientArray = returnData;
      },
      // プロジェクトリスト
      getProjectList:function(pData){
        this.projectArray = pData;
      },
      // 案件リスト
      getAnkenList:function(aData){
        this.ankenArray = aData;
      }
    },
    created: function(){
      //クライアントリストを取得するGAS関数を発火させる。成功すればinitData関数
      google.script.run
        .withSuccessHandler(this.initData)
        .withFailureHandler(function(arg){
          alert("データの取得に失敗しました。");
        }).getSheetDataCliant();

    }
  });
</script>

GAS関数はそこまで難しいことはしてません。
Vue側でselectのvalue値をv-modelディレクティブでwatchして、
その値が変更になる度にvalue値を引数にしてGAS関数を走らせて、
GAS関数から返ってきた配列でVueのDataの配列を書き換えてselectの内容を動的に変更しています。
出来上ると以下のようなスプレッドシートの内容を引っ張ってくる親子プルダウンが完成します。

と書いてますが、「これ以外にもっといいやり方あるよ」とかあれば是非教えて頂きたいです・・・・・・・・。

次は選んだ内容をスプレッドシートにフォームで入力する実装を進めます。

お次はこちら