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数组，并将每个媒体show的{{1}}属性更新为name == A。

我似乎可以通过for循环轻松更新它们，但视图不会改变。我已经完成了一些研究，似乎true可以帮助解决这个问题，但在这种情况下我似乎无法让它发挥作用。

如何使用Vue.$set执行：$set？

修改

AJAX调用更新this.pairs[i].left_media.show = false;

show_comment

Answer 1

如果您的目标环境支持Object.values，或者您正在使用babel或其他东西进行编译，那么它只是

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

对我也有用，所以我想知道你的问题是否还有其他问题。

Vue JS - Reactivity $ set对象数组

1 个答案: