Vue JS - 活动$对象数组中属性的设置属性

我的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) { 
    }); 
}

来源

2017-06-02 nogias

你如何将项目添加到'pairs'？ – Bert

啊，该数组是从数据库中拉出:) – nogias

那么，数据库中的数据添加到配对的具体方式是什么？ – Bert

如果您的目标环境支持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

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

来源

2017-06-02 04:43:38 Bert

我试过你的解决方案。但有几个问题：使用$ set的方法报告错误'Uncaught（in promise）TypeError：t.trim不是函数（...）'。也许它没有设置正确的属性？其他方法成功更改媒体的值，但浏览器上未显示更改。 – nogias

@nogias你可以发布你正在更新的代码吗？听起来像是在Ajax回调中。 – Bert

你是对的，有一个AJAX调用。我已经更新了上面的问题，对不起，这和我上面简单的例子有点不同，但是想法是一样的。 – nogias

Vue JS - 活动$对象数组中属性的设置属性

回答

相关问题