VueJS - 麻煩理解$ set和。$ add

Question

我想在VueJS中構建一個對象數組，我遇到了一些與.$set和.$add有關的問題。

例如，我需要以下結構添加新項目/對象時：

{ 
    "attendees": { 
    "a32iaaidASDI": { 
     "name": "Jane Doe", 
     "userToken": "a32iaaidASDI", 
     "agencies": [ 
     { 
      "name": "Foo Co" 
     } 
     ] 
    } 
    } 
} 

新對象響應於AJAX調用返回JSON格式添加與上述相同。這是我的Vue例如：

var vm = new Vue({ 
      el: '#trainingContainer', 
      data: { 
       attending: false, 
       attendees: {} 
      }, 
      methods: { 
       setParticipantAttending: function(data) 
       { 
        if (data.attending) 
        { 
         this.attendees.$add(data.userToken, data); 
        } else { 
         this.attendees.$delete(data.userToken); 
        } 
       } 
      } 
     }); 

這隻能如果我開始與我的attendees: {}data但是當我加入與會者後嘗試attendees.length，我收到undefined。如果我使用attendees: []，則新對象看起來不會被添加。最後，如果我使用.$set(data.userToken, data)它不會添加所需的'token':{data..}格式。

這裏有什麼問題？使用空對象數組開始時使用$.add的正確方法是什麼？

UPDATE

我發現，它的工作原理，如果我設置attendees: {}，然後添加一個新的對象時，如果

if (data.userToken in this.attendees) { 
    this.attendees.$set(data.userToken, data); 
} else { 
    this.attendees.$add(data.userToken, data); 
} 

不知道有一種更好的方式來做到這一點。

Answer 1

如果您將與會者設置爲空對象（{}），則它不具有length屬性。該屬性在陣列上。

如果您將參與者設置爲空數組（[]），那麼您需要使用$ set（或者真的，我認爲您需要.push（）） - $ add旨在用於不在數組上的對象。

我不是很追隨你的最後一個問題 - 你能添加更多的上下文嗎？

編輯2：

下面的答案是Vue 1.x.對於Vue公司2.x和更多地使用：

this.$set(this.attendees, data.userToken, data); 

點擊此處瞭解詳情：https://vuejs.org/v2/api/#Vue-set

編輯：

響應你的更新，你應該能夠只使用$在所有情況下設置。即只是這樣做：

this.attendees.$set(data.userToken, data); 

Answer 2

隨着0.6.0版本，這似乎是正確的做法：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 

http://vuejs.org/guide/reactivity.html#Change_Detection_Caveats