0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版、ハマったところinputの再描画編~~

Last updated at Posted at 2020-05-16

#はじめに
Vueに対応していこう~。ということで始めたわけですが、
inputの再描画がハマりにハマって、くじけそうになったんで残しておきます。

#結論
ここを見ている方は、たぶん、同じ症状の方だと思うのでとっとと結論書きます。
私は、モーダル表示にして 回避 しました!
そうです。すみません。若干逃げてます。
ですが、私の作りたかったものからすると、ちょうど都合がよかったのです・・・

#なぜモーダルだとうまくいくのか
モーダル表示をする際に、モーダルにするためのv-showに設定したプロパティをtrueにします。
それと同時に、上記の内側のタグのv-ifもtrueにするようにしました。
こんな感じです。

    <div id="modal" v-show="showContent" class="overlay">
      <div id="modal_content" v-if="dispDetails" class="content">
        <!-- さらに内側のタグ 

モーダルにすることで、モーダルを表示する際には、showContent も dispDetails も共にtrueにします。閉じる際は共にfalseにします。(上記の場合、同じプロパティを使用しても問題ないとは思いますが明示的に分けました。)
dispDetailsがTrue、Falseに切り替わることで、v-ifが設定されたタグよりも内側のタグがきちんと再描画されるようになったのだと思われます。

#感想
表示できるようになって本当にほっとしました。

Vue版、ハマったところcheckboxの再描画編~~も投稿しました。

全体の記事はこちら↓
スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その1~~

スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その2~~

こちらもよろしくお願いします

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?