vueでのハマりポイントですが、関門としては
- コンポーネント間の連携
- オブジェクトや配列となった時に反映がされない
などがあげられると思います。
コンポーネント間の連携に関してはこちらの記事でも書き、ソースを色々とみてなんとかわかりかけてきたのですが、値が反映されないのには悩みました。
具体的には変数を確かに書き換えているはずなのに、画面上でそれが動いていない、あるいはデバッガにも一切それが出てこないということがありえます。
内部の変数は変更されているが、検知がされていないという状態のようです。
なぜか、次の動作(別のボタンをクリックする)などすると動くことが多いのです。
まだ完全な理解にはいたっていないのですが、自分が調べた範囲内でのメモを。
vueは配列の検知ができない
のっけから公式にしっかり書いてありました・・
どうやら
|
1 |
Vue.set(object, propertyName, value) |
などのように書いてあげないとうまく動かないようです。
ただこれを使っても階層が深くなった配列とオブジェクトの時にどのようにすればいいかがまだしっかりと理解できていません・・・
強引に同期させる方法としては forceUpdate という関数もあるようです。
確かにこれを使えば、画面のレンダリングが正常になります。
これが最適解なのかはわかりませんが・・・。
Vue.jsにロード/再レンダリングを強制することはできますか
前途は長いですね・・
オブジェクトの場合も同じ現象が起こり易いのですが、気をつけるべき点としては
初期化の際に空でいいのでしっかり定義することですかね。
当たり前何ですが自分の場合、この部分が雑で動かないことがよくありました・・・
