[解決済み] Vue.js - ネストされたデータを適切に監視する方法
2022-02-24 15:01:18
質問
私は、いくつかのプロップのバリエーションを適切に監視する方法を理解しようとしています。 私は親コンポーネント(.vueファイル)を持っていて、ajax呼び出しからデータを受け取り、オブジェクト内にデータを入れて、v-forディレクティブを通していくつかの子コンポーネントをレンダリングするためにそれを使用して、以下に私の実装を簡略化しています。
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
...そして、その内側には
<script>
タグを使用します。
data(){
return {
players: {}
},
created(){
let self = this;
this.$http.get('../serv/config/player.php').then((response) => {
let pls = response.body;
for (let p in pls) {
self.$set(self.players, p, pls[p]);
}
});
}
アイテムオブジェクトはこんな感じです。
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
今、私の子"player"コンポーネント内部では、私は任意のItemのプロパティの変化を監視しようとしていると私は使用しています。
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to work with changes in prop
}
}
動作はするのですが、私には少しトリッキーに感じられ、この方法が正しいのかどうか疑問に思っていました。私の目標は
prop
が変更されるか
myArray
は、新しい要素または既存の要素内の何らかのバリエーションを取得します。何かご提案いただければ幸いです。
解決方法は?
を使用することができます。 ディープウォッチャー を使用します。
watch: {
item: {
handler(val){
// do stuff
},
deep: true
}
}
のオブジェクトに対するあらゆる変更を検出するようになります。
item
配列への追加と、配列自体への追加(例えば
Vue.set
). 以下はJSFiddleです。
http://jsfiddle.net/je2rw3rs/
EDIT
トップレベルのオブジェクトのすべての変更を監視する必要がなく、ネストされたオブジェクトを直接監視するための厄介でない構文が必要な場合、単純に
computed
の代わりに
var vm = new Vue({
el: '#app',
computed: {
foo() {
return this.item.foo;
}
},
watch: {
foo() {
console.log('Foo Changed!');
}
},
data: {
item: {
foo: 'foo'
}
}
})
以下は、JSFiddleです。 http://jsfiddle.net/oa07r5fw/
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] 小道具」の変化の聞き取り方
-
[解決済み】ネストされたJavaScriptオブジェクトのキーが存在するかどうかをテストする
-
[解決済み】vuexからストアの値を監視する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?