Vueのオブジェクトのプロパティは、V-バインドを変更していない：クラス

Question

私はこのようなルックスの種類のオブジェクトがあります。

：私はこのような私が表示午前のグループにこのオブジェクトを分割している

{ 
    data: [ 
     { 
      id: 28, 
      type: "blabla", 
      name: "myname", 
      language: "en", 
      active: true 
     }, 
     { 
      id: 5, 
      type: "blabla", 
      name: "myname2", 
      language: "fr", 
      active: false 
     }, 
     // etc 
    ] 
} 

を

<li class="suggestion" v-for="suggestion in group"> 
    <a href="#" :class="{ active: suggestion.active }"></a> 
</li> 

Vueオブジェクトにpositionプロパティがあるため、結果を強調したいと思います。これは変更することができます。

私は、位置属性に設定さウォッチャーがあります

position() { 
    this.suggestions.forEach((suggestion, index) => { 
     suggestion.active = index === this.position; 
    }); 
} 

それは、現在の位置（したがって、現在の項目がアクティブ）になります。これは、オブジェクトとそのプロパティの配列をチェックしているときにうまく動作します。アイテムは.activeプロパティを完全に変更します。しかし、クラスバインディングは再評価されていないようです。

ここで何が問題になりますか？最初のアクティブ状態は考慮され、最初の項目は完全にうまく強調表示されます。

実際のクラスの変更には何も起こりませんが、Vue devtoolsではオブジェクトのプロパティが変更されているとは限りません。

Answer 1

だから、問題は、オブジェクトが、このように作成された場合ということであった：

object[suggestion.type].push(suggestion); 

Vueのは、そのオブジェクトへの変更を検出しません。これは、Vueがオブジェクトの変更を監視する方法と関係しています。 Vueのは、あなたが作成したオブジェクトとうまくプレーし、あなたが利用する必要が無効になりたいようにするためには

Vue.set

Vue.set(object, suggestion.type, suggestion) 

それとも

私は深い時計を行いませんVUEを推測している

this.$set(object, suggestion.type, suggestion)