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 - 活動$對象數組中屬性的設置屬性

回答

相關問題