skillup

技術ブログ

JavaScript

vueでの配列、オブジェクトの反映に関して

投稿日:2020年4月15日 更新日:

vueでのハマりポイントですが、関門としては

  • コンポーネント間の連携
  • オブジェクトや配列となった時に反映がされない

などがあげられると思います。

コンポーネント間の連携に関してはこちらの記事でも書き、ソースを色々とみてなんとかわかりかけてきたのですが、値が反映されないのには悩みました。

具体的には変数を確かに書き換えているはずなのに、画面上でそれが動いていない、あるいはデバッガにも一切それが出てこないということがありえます。

内部の変数は変更されているが、検知がされていないという状態のようです。

なぜか、次の動作(別のボタンをクリックする)などすると動くことが多いのです。

まだ完全な理解にはいたっていないのですが、自分が調べた範囲内でのメモを。

vueは配列の検知ができない

vueは配列の検値ができない

のっけから公式にしっかり書いてありました・・

どうやら

などのように書いてあげないとうまく動かないようです。

【Vue.js】v-modelを使ってた時になんか動なかったお話

ただこれを使っても階層が深くなった配列とオブジェクトの時にどのようにすればいいかがまだしっかりと理解できていません・・・

強引に同期させる方法としては forceUpdate という関数もあるようです。

確かにこれを使えば、画面のレンダリングが正常になります。

これが最適解なのかはわかりませんが・・・。

Vue.jsにロード/再レンダリングを強制することはできますか

前途は長いですね・・

オブジェクトの場合も同じ現象が起こり易いのですが、気をつけるべき点としては

初期化の際に空でいいのでしっかり定義することですかね。

当たり前何ですが自分の場合、この部分が雑で動かないことがよくありました・・・

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

React×TypeScriptをさわって

新年から新しい現場でReact × TypeScriptを触るようのなのですが、予習していて気づいたことを。 ほとんど雑記ですね・・ 当たり前ですが、データの管理の仕方などはVueと似ているため、やっ …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

vuexについて

vueの変数管理に関して、vuexについて勉強したことなどを。 ざっくり言ってしまうとvuex=グローバル変数という感じかと思います。 このキーワードで検索したところヒットした記事があったんで多分間違 …

アーカイブ