Vue：Observerオブジェクトが自動的に設定された空の配列

Question

データの空の配列を初期化し、サーバーからJSONを取得しようとしています。私はそれをログインしたとき

問題は、アレイは、常に余分なオブザーバーオブジェクトを持っているということですので、私はこの参照してください。

empty items array: [ob: Observer]

を、ここでのコードの抜粋です：

data() { 
     return { 
      items: [] 
     } 
    }, 
created() { 
     this.$http.get('/api/menus').then(function (response) { 

      console.log('items before', this.items); //THIS LOGS items before: [__ob__: Observer] 
      this.items = [].concat(response.body); 
      this.items.forEach(function (item) { 
       console.log('item', item); 

       item.$add('active', false); 

       item.tests.forEach(function (test) { 
        test.$add('active', false); 
       }); 
     }); 

     }).catch(function (err) { 
      console.error('err', err); 

     }); 

    }, 

問題がときということです配列内のオブジェクトに新しいプロパティを追加しようとすると、エラーが発生します。

err TypeError: item.$add is not a function

それはオブザーバオブジェクトを配列の一部とみなすために起こります。

正常ですか？ $ addが存在するかどうかチェックするだけですか？それをビューでレンダリングすると、Vueはこのオブジェクトを無視しますか？

Answer 1

コードによれば、itemsオブジェクトのactiveプロパティをfalseに設定したいとします。また、すべてのアイテムのtestsのすべてのプロパティーactiveをfalseに設定したいとします。

Vue.jsは自動的に変更されますが、オブジェクト自体のプロパティではなく、自動的に変更が検出されます。配列VUEのためにのみ、これらのメソッド（vue.js https://vuejs.org/v2/guide/list.html#adで、リストのレンダリング詳細）による変化を検出します：

• プッシュ（）
• ポップ（）
• シフト（）
• アンシフト（）
を
• スプライス（）
• ソート（）
• 逆（）

しかし、プロパティについてはどうですか？ forceの場合、Vue.set(object, property, value)またはthis.$setのいずれかの配列またはオブジェクトの深さの変化を確認するには、Vueインスタンスに変更します。

だから、あなたの例では、あなたはこのようにそれを実装することができます

this.items.forEach(function (item, key) { 
    console.log('item', item); 

    this.$set(this.items[key], 'active', false); 

    item.tests.forEach(function (test, testKey) { 
     this.$set(this.items[key].tests[testKey], 'active', false); 
    }, this); 
}, this); 

そして、それは動作するはずです。 http://jsbin.com/cegafiqeyi/edit?html,js,output（一部のES6機能が使用されていますが、混乱しないでください）