skillup

技術ブログ

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

どうやら

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

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

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

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

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

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

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

前途は長いですね・・

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

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-6100 …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …