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 
    } 
}, 

문제는 테이블이 다시 렌더링되지 않는다는 것입니다. 보다 정확하게는 구성 요소 "시간 - td"에 새 데이터가 포함되어 있지 않습니다.
또한 Vue.set을 사용해 보았지만 성공하지 못했습니다.

업데이트 테이블을 도와 줄 수 있습니까? 나는 리팩토링과 시도를 위해 5 시간을 보냈다. 사전에
덕분에이 상태가 될 수 있습니다 내 경우


해결 방법 : 아무 활동이없는 활동이 있습니다. 그래서 각각의 경우에 대한 두 개의 계산 된 소품을 만들어 별도로 및 스위치를 렌더링 V-경우 = "activities.length"

Answer 1

나는 당신의 문제가 직접 배열 (당신이 here를 읽을 수 있습니다) Change Detection Caveats에 대한 뷰 알려진 문제로이라고 생각 할당, 변경 사항을 감지하지 못합니다.

넌 (직접 배열 대입 함께) 코드의이 부분을 변경해야 어레 Vue.set (옵션)

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; 
    } 
} 

를 변화를 감지하고 다시 렌더링 컴포넌트를 위해. 그것 differents 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); 
} 

는 희망이 도움이!