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 

也为我工作，所以我不知道是否还有别的东西与你的问题怎么回事。