【Vue.js】更新されたオブジェクトがリアクティブになりません

前提・実現したいこと

Vue.js（Vuetify）で，ページの読み込み時にオブジェクトを更新し，ブラウザ上の表にデータを表示しようとしています．GASのSPAです．

手順としては，
0. Vueのdata内に空の配列を用意する
0. createdの時点でgoogle.script.run.withSuccessHandlerを用いてスプレッドシートから配列を持ってくる（JSON形式）
0. 戻り値をparseし，Object.assignを用いて配列を更新
0. v-data-tableの:items（method）が実行され，更新された配列が表示される

発生している問題・エラーメッセージ

配列更新の直後（上記3の段階）にログを確認すると値が反映されているので，更新の時点でリアクティブでなくなっていると考えられます．こちらによると，Object.assign()を用いて作成されたオブジェクトは元のオブジェクトと抱き合わせにすれば変更をトリガしてくれるはずなのですが（ここの認識が間違っていたら教えてください），表の中身は空っぽのようです．エラーログは出ていません．望んでいる解決方法としては，ここのオブジェクトをリアクティブのまま更新する方法が知りたい，あるいはリアクティブなオブジェクトを生成する他の方法が知りたい，です．

データは数十列数万行あるため，ループ処理などは避けたいと思っています．

該当のソースコード

html
1<!DOCTYPE html>
2  （中略）
3  <template>
4    <v-data-table
5      （中略）
6      :items:"function1"
7      （中略）
8    >
9    </v-data-table>
10  </template>
11</html>

Javascript
1<script>
2  new Vue ({
3    data(){
4      return{
5        arrays:[], //表示させたい配列の入れ物
6      },
7    },
8    methods:{
9      function1 () { //テーブル表示用
10        let table = [];
11        table = this.arrays;
12        （中略） //絞り込み処理
13        return table;
14      }
15    },
16    created():{
17      google.script.run.withSuccessHandler(function(value){
18        value = JSON.parse(value);
19        this.arrays = Object.assign({}, this.arrays, value);
20        console.log(arrays); //このログは意図していたもの（読み込んだデータすべて）が出る
21      })
22      .function2(); //スプレッドシートから配列を持ってくる，戻り値value
23    },
24  })
25</script>

試したこと

入れ物の配列arraysにあらかじめ要素を入れておく（入っていた要素の表は出ましたが更新はされませんでした）
配列要素として追加する（setでもspliceでも，pushでもis not functionエラーか，property undefinedが出ました）
function1の括弧を外す（is not functionエラーが出ました）
createdの中にfunction1を書く（is not functionエラーが出ました）

補足情報（FW/ツールのバージョンなど）

vsCodeで書いたコードをclaspで反映させてchromeで確認しています．
Vueのバージョンは確か2のままで3にはしていなかったと思います．

行動規範の内容に同意します

回答2件

ベストアンサー

google.script.run.withSuccessHandler(function(value){
        value = JSON.parse(value);
        this.arrays = Object.assign({}, this.arrays, value);
        console.log(arrays); //このログは意図していたもの（読み込んだデータすべて）が出る
      })

このコールバックの中のthisってvueコンポーネントじゃないきがします
selfを用意するかアロー関数にしてみてください

投稿2021/01/22 09:15

mikkame

総合スコア5036

退会済みユーザー

2021/01/22 10:05

回答ありがとうございます。thisの参照が違うということで，アロー関数に変更したうえでgoogle.script.runをVueの外側に出してvm.で参照したところ無事表示されました． thisの参照についてよくわかっていなかったので，アロー関数でthisが示すものが変わるというのが勉強になりました．ありがとうございます。

行動規範の内容に同意します

ぱっと見た感じ上手くいきそうな気がしたのですが、
挙動としてはVue側で変更を検知できていないような動きに思えます。

Object.assignではなくVueの機能であるthis.$set()やVue.setを明示的に使ってあげると動作改善するでしょうか？

参考：
https://qiita.com/tmak_tsukamoto/items/e303328681f20a036530

投稿2021/01/22 06:54

編集2021/01/22 07:19

tsuyo_244

総合スコア219

退会済みユーザー

2021/01/22 07:18

回答ありがとうございます。Vue.setの仕様を見ていると Vue.set( target, propertyName/Index, value)となっております． targetとvalueに入れるべき変数は分かるのですが，空の配列に配列全部を追加する場合にはpropertyName/Indexは何になるのでしょうか？0とか1とか，データのプロパティとかを具体的に入れているのですが，Cannot set reactive property on undefined, null, or primitive value: undefined というエラーが返ってきました．

tsuyo_244

2021/01/22 09:00

すみません、ちゃんとソースコードを読めてませんでした。配列そのものをまるっと置き換える必要があるのですね。おっしゃるようにVue.setだと配列の内部に(例えば配列のインデックス0に◯◯を設定...という形)値を入れる形になるのでVue.set(this.arrays, 0, data)だと入れ子になってしまいますね。回答と離れてしまいますが、大きなデータでループを避けたいとおっしゃっていましたが、一度試してみてパフォーマンス面含めどうなるかを確認いただくのはよいかもしれません。詳細は把握できていませんが、VueではUIへの反映をたしかある程度貯めてから行う仕組みだったと記憶していて、ループ1回ごとに描画を書き換えるみたいな動作にはならなかったので意外とそこまでのパフォーマンス劣化は起きないのかもしれません。

退会済みユーザー

2021/01/22 10:08

こちらの手法を試す前に解決しましたが，for文だとどのくらい表示速度に差が出るのかの検証は進めてみようと思います．改めてありがとうございました。

行動規範の内容に同意します

あなたの回答