#はじめに
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~~
こちらもよろしくお願いします