skillup

技術ブログ

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

どうやら

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

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

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

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

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

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

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

前途は長いですね・・

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

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

アーカイブ