skillup

技術ブログ

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

どうやら

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

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

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

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

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

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

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

前途は長いですね・・

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

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

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

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