Vue.jsの値が変化しない時の対処

auです。

きのう、Vue.jsの内部の値は変化するけど見た目に変化が表れないという記事を書きました。

program-shoshinsya.hatenablog.com

こちらが解決したのでメモ程度に書いておきます。

原因

原因としては、「DOMの再描画が起こらない」ということでした。

参考にした記事
cloudpack.media

再描画されてないんじゃ見た目に変化が起こらないと思ったのですが、参考にした記事に書いてあることを行っても直りません。

解決策

仕方ないのでmasterからブランチを再度切り、必要最低限のコードだけ記述したらうまく行きました。

両方のディベロッパーツールをみたところ、大きな違いがありました。

それは、「エラーの数」です。

右側に赤い×マークがあると思います。これがエラーです。

該当のブランチを消してしまったのですが、14個くらいエラーが起きていたと思います。おそらくその中にDOMの再描画を邪魔するエラーがあったのだと思います。

もしも再描画されなくて、調べてもうまくいかなったらエラーを解消するのがいいのかもしれませんね。