ビューコンポーネントがオブジェクトの変更を正しく見ていない

Question

ルートに2つのオブジェクトがあります。objとnewObjです。私はdeep: trueと私のobjオブジェクトの変更を見て、それに応じて私はそれに応じてnewObjを更新します。

私のvueデバッガでは、newObjは期待どおりに更新されたようですが、forループカウントは実行されません。または、私が{{ newObj }}にしようとすると、最初の更新だけが記録されます。

私は問題on this Fiddleを再作成しようとしました。

私のhtml：

<div id="app"> 
    <button @click="appendTo">Append</button> 
    <my-comp v-bind:new-obj="newObj"></my-comp> 
</div> 

とVUE：

new Vue({ 
    el: '#app', 
    data: { 
    obj: {}, 
    newObj: {} 
    }, 

    methods: { 
    appendTo() { 
     if (typeof this.obj[1] === 'undefined') { 
     this.$set(this.obj, 1, {}) 
     } 

     var randLetter = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97); 
     this.$set(this.obj[1], randLetter, [ [] ]) 
     } 
    }, 

    watch: { 
    obj: { 
     handler(obj) { 
     var oldKeys = Object.keys(obj) 
     var newKeys = Object.keys(this.newObj); 

     var removedIndex = newKeys.filter(x => oldKeys.indexOf(x) < 0); 
     for (var i = 0, len = removedIndex.length; i < len; i++) { 
      delete this.newObj[removedIndex[i]] 
     } 

     oldKeys.map((key) => { 
      if (this.newObj.hasOwnProperty(key)) { 
      var newInnerKeys = Object.keys(this.newObj[key]); 
      var oldInnerKeys = Object.keys(obj[key]); 

      var additions = oldInnerKeys.filter(x => newInnerKeys.indexOf(x) < 0); 

      for (var i = 0, len = additions.length; i < len; i++) { 
       // here 
       this.$set(this.newObj[key], additions[i], [ [] ]); 
      } 

      var deletions = newInnerKeys.filter(x => oldInnerKeys.indexOf(x) < 0); 
      for (var i = 0, len = deletions.length; i < len; i++) { 
       delete this.newObj[key][deletions[i]] 
      } 

      } else { 
      this.newObj[key] = {} 
      for (var innerKey in obj[key]) { 
       this.$set(this.newObj, key, { 
       [innerKey]: [ [] ] 
       }); 
      } 
      } 

      console.log(obj); 
      console.log(this.newObj) 
     }); 
     }, 
     deep: true 
    } 
    } 
}) 

Vue.component('my-comp', { 
    props: ['newObj'], 
    template: ` 
     <div> 
     <div v-for="item in newObj"> 
      test 
     </div> 
    </div> 
    ` 
}) 

Answer 1

あなたのデータnewObjはVUEによって定義されたゲッターとセッターを持っています。 setterが呼び出されると、UIが再レンダリングされます。設定値は、の参照がnewObjに変更されたときにトリガーされます。値を変更した場合は変更されません。私は意味：

this.newObj = {} // triggered 

this.newObj['key'] = 'value' // not triggered 

あなたは財産this.newObjに深いウォッチャーを追加することができます。オブジェクトnewObjectのコピーを作成

this.newObj = Object.assign({}, this.newObjec); 

：またはトリックとその参照を変更します。

ここでフィドルが更新されました。

https://jsfiddle.net/749nc5d2/