Vue JS - 活動$對象數組中屬性的設置屬性

Question

我的Vue.js版本是v1.0.28。我想知道如何使用Vue.$set來設置對象數組的深層屬性。例如，我有：

this.pairs = [ 
    { 
     "left_media": { 
      "name": "A", 
      "show": false 
     }, 
     "right_media": { 
      "name": "B", 
      "show": false 
     } 
    }, 
    { 
     "left_media": { 
      "name": "B", 
      "show": false 
     }, 
     "right_media": { 
      "name": "A", 
      "show": false 
     } 
    } 
] 

我需要遍歷this.pairs陣列和更新每個媒體name == A到true的show屬性。

我似乎可以通過for循環輕鬆更新它們，但視圖不會改變。我已經做了一些研究，似乎Vue.$set可以幫助解決這個問題，但我似乎無法在這種情況下得到它的工作。

如何使用$set來做：this.pairs[i].left_media.show = false;？

編輯

AJAX調用更新show_comment

toggleComment: function(media, which_media) { 
    this.$http.post('/api/project-media/update.json', { 
    id: media.id, 
    show_comment: !media.show_comment 
    }) 
    .then(function (response) { 
    if (response.body.success) { 
     // update show_comment status for this media in all pairs\ 
     for (let pair of this.pairs) { 
     for (let key of Object.keys(pair)) { 
      if (key == 'project_media_left' || key == 'project_media_right') { 
      if (pair[key].id == media.id) { 
       this.$set(pair[key], 'show_comment', !media.show_comment); 
      } 
      } 
     } 
     } 
    } 
    }, function (response) { 
    }); 
} 

Answer 1

如果您的目標環境支持Object.values或者您正在使用巴貝爾或東西來編譯，那麼它只是

for (let pair of this.pairs) 
    for (let v of Object.values(pair)) 
    if ('A' == v.name) v.show = true 

如果不是然後

for (let pair of this.pairs) 
    for (let key of Object.keys(pair)) 
    if (pair[key].name == 'A') 
     this.$set(pair[key], 'show', true) 

Example。

不過說實話，

for (let pair of this.pairs) 
    for (let key of Object.keys(pair)) 
    if (pair[key].name == prop) 
     pair[key].show = true 

也爲我工作，所以我不知道是否還有別的東西與你的問題怎麼回事。