Vue2がデータ更新を検出する

Question

Vue2とImを使用してメッセージングコンポーネントを作成しています。新しいメッセージが30秒ごとに表示されています。メッセージがあれば、自動的に関連スレッドに挿入されます。データの変更（例えば、新しいメッセージが追加されました。

私は新しいメッセージが会話に追加されたアイコンを点滅したいので、私はこれをしたい理由は、ある。

ここでは関連性があります私のコードの一部：

poll_messages(){ 
    this.get_messages(); 
    this.interval = setInterval(() => { 
     this.get_messages(); 
    }, 30000); 
}, 
get_messages(){ 
    $.get(base_url + 'api_messages/get_messages/', (data) => { 
     this.threads = data; 
    }); 

}, 

スレッド変数が変わったら知りたい。これは可能ですか？そのために

Answer 1

はあなたのソリューションでは、これらの変化

を見ると、解決すること

poll_messages(){ 
this.get_messages(); 
this.interval = setInterval(() => { 
    this.get_messages(); 
}, 30000); 
}, 
get_messages(){ 
$.get(base_url + 'api_messages/get_messages/', (data) => { 
    this.threads = data; 
}); 

}, 
watch:{ 
threads(){ 
    // is executed when there are changes to the threads property 
} 
} 

ようなものになるだろう性質と実行を読み込みVue2見た目の関数であり、あなた自身を検証できる変更

poll_messages(){ 
this.get_messages(); 
this.interval = setInterval(() => { 
    this.get_messages(); 
}, 30000); 
}, 
get_messages(){ 
$.get(base_url + 'api_messages/get_messages/', (data) => { 
if(this.threads != data){ 
    this.threads = data; 
} 
}); 

}, 
watch:{ 
threads(){ 
    // is executed when there are changes to the threads property 
} 
} 

Answer 2

私はあなたがコンポーネントのように見えると思います：

methods: { 
    poll_messages() { 
     this.get_messages(); 
     this.interval = setInterval(() => { 
     this.get_messages(); 
     }, 30000); 
    }, 
    get_messages() { 
     $.get(base_url + 'api_messages/get_messages/', (data) => { 
     this.threads = data; 
     }); 

    }, 
} 

次の項目を追加することができます。

watch: { 
    'threads': function() { 
    // Do work here when it updates 
    } 
} 

は、この情報がお役に立てば幸い！

Answer 3

threadsに新しい値を割り当てるたびにVueアップデートがトリガーされるため、watchが実行されます。 2つの異なるアプローチこれを達成するために私の心に来る：項目のスタイルの変更を追加するためにtransition-groupを使用し、あなただけのアイコンを点滅したい場合

1. は、あなたの通知に追加しました。エフェクトは、トランジションのため一定の時間持続します。

   参考：https://vuejs.org/v2/guide/transitions.html#List-Transitions

2. はwatchでそれを比較して、新しいアイテムのプロパティに変更を適用し、そのスタイルを変更するv-bind:styleかv-bind:classを使用します。

   watch: { 
       threads(newVal) { 
        for (let message of newVal) { 
         // compare new and old values and apply changes 
        } 
       } 
   } 
   

・ホープ、このことができます！