skillup

技術ブログ

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

どうやら

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

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

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

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

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

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

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

前途は長いですね・・

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

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

アーカイブ