vue.jsで複雑な計算オブジェクトを変更する

Question

テーブルのオブジェクトが複雑です。

{ 
    1510002000: { 
     date: "07.11.17" 
     hours: { 
      1510002000:{ 
       activity:{ 
        activity: "Тест", 
        color: "#00ff00", 
        end_at: 1510005600, 
        start_at: 1510002000, 
        type_id: 1 
       } 
      }, 
      1510005600: { 
       ... 
      }, 
      ... 
     } 
    }, 
    .... 
} 

これは、このオブジェクトを使用して、テンプレートからのコードです：

<tr v-for="date in this.tds"> 
     <td>{{ date.date }}</td> 
     <td is="hour-td" 
      v-for="hour in date.hours" 
      :color="hour.activity.color" 
      :start_at="hour.activity.start_at" 
      :end_at="hour.activity.end_at" 
      :activity="hour.activity.activity" 
      :type_id="hour.activity.type_id" 
     > 
     </td> 
    </tr> 

私は計算されたプロパティとしてそれを評価したが、私は親コンポーネントは、データassyncを提供する場合、テーブルを再描画する必要があり、このように見えますので、私は（と呼ばれる「活動」を支える）小道具のためのウォッチャーがあります

watch: { 
    activities: function(){ 
     var vm = this; 
     let dth = new DateTimeHelper; 

     if (this.activities.length > 0){ 
      this.activities.forEach(function(activity){ 
       let dateTimestamp = dth.getDateTimestampFromTimestamp(activity.start_at); // just getting the key 

       if (vm.tds[dateTimestamp]){ 
        if (vm.tds[dateTimestamp].hours[activity.start_at]){ 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.activity = activity.activity; 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.color = activity.color; 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.type_id = activity.type_id; 
        } 
       } 
      }); 
     } 

     console.log(vm.tds) // here I can see that the object is filled with new data 
    } 
}, 

問題は、テーブルが再描画しないことです。より正確には、コンポーネント「時 - 時間」は新しいデータを含まない。
また、私はVue.setを使用しようとしましたが、その成功はありません

更新テーブルを手伝ってもらえますか？私はリファクタリングと試行のために5時間を費やしました。事前に
おかげ

SOLUTION
は、私の場合、2つの状態が存在することができます：活動があり、何の活動はありません。配列ダイレクトで私は（あなたがhereを読むことができます）あなたの問題はChange Detection CaveatsためVueの既知の問題であることを考えるV-IF =「activities.length」

Answer 1

によりだから私は、それぞれの場合には2つの計算された小道具を作り、それらを別々にレンダリングし、スイッチ割り当て、変更を検出しません。

あなたが（直接配列逢引で）コードのこの部分を変更する必要があります。

if (vm.tds[dateTimestamp]){ 
    if (vm.tds[dateTimestamp].hours[activity.start_at]){ 
     vm.tds[dateTimestamp].hours[activity.start_at].activity.activity = activity.activity; 
     vm.tds[dateTimestamp].hours[activity.start_at].activity.color = activity.color; 
     vm.tds[dateTimestamp].hours[activity.start_at].activity.type_id = activity.type_id; 
    } 
} 

変化を検出し、コンポーネントを再描画するために、アレイのVue.set（）オプションで。それは貴様のoccassionsに私の仕事：

// Vue.set(object, key, value) 
// something like this: 
Vue.set(vm.tds[dateTimestamp].hours[activity.start_at].activity.activity,1,activity.activity); 

ここ

さらに詳しい情報：https://codingexplained.com/coding/front-end/vue-js/array-change-detection編集

：

また

私が使用することを試みた：私はあなたが言ったことを今見

Vue.set、それでも成功しません。

あなたが意味すること：「成功なし」？コードを共有できますか？私は同じ問題があり、Vueで解決しました.set。

vm.$forceUpdate()を見て、最後のconsole.logの後に実行するか、vm.$nextTick([callback])の中のすべてのコードを取り込み、すべてのアクション（表のデータをロード）し、次のティックでコンポーネントを再レンダリングします。ここ

さらに詳しい情報：https://vuejs.org/v2/api/#vm-forceUpdate & & https://vuejs.org/v2/api/#Vue-nextTick

編集2：https://vuejs.org/v2/guide/list.html#Array-Change-Detection：

私はあなたの問題は、配列のインデックスである、あなたはここで見てみるべきだと思います。

if (vm.tds[dateTimestamp]){ 
        if (vm.tds[dateTimestamp].hours[activity.start_at]){ 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.activity = activity.activity; 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.color = activity.color; 
         vm.tds[dateTimestamp].hours[activity.start_at].activity.type_id = activity.type_id; 
        } 
       } 

として簡素化： 変更してみてください

if (vm.tds[dateTimestamp] && vm.tds[dateTimestamp].hours[activity.start_at]){ 
    Vue.set(vm.tds, vm.tds.indexOf(vm.tds[dateTimestamp].hours[activity.start_at]), activity); 
} 

はそれが役に立てば幸い！