獲取Vue更新對象更新

當我更新Vuex中的對象時，如何獲取Vue js進行更新？獲取Vue更新對象更新

現在我有一個突變

EDIT_USER (state, user) { 
    const record = state.users.find(element => element.id === user.id) 
    let index = state.users.indexOf(record) 
    state.users[index] = user 
},

這適用對象級別，並在控制檯中確實更新了state.users對象。但是，這個觀點並沒有自動更新。

如果我首先拼接，然後按下，它按預期工作，並且視圖得到更新...但它的醜陋。

EDIT_USER (state, user) { 
    const record = state.users.find(element => element.id === user.id) 
    state.users.splice(state.users.indexOf(record),1)s 
    state.users.push(user) 
    },

它醜陋，因爲事後，其明顯處於一個新的指數，這使得它在更新後的表視圖跳來跳去。這裏不是真正的用戶體驗。

我喜歡更多'編輯'風格的東西。

如果我只是更新對象，我該如何讓Vue重新渲染？本地，異步或通過websockets從外部

我以爲這一切都應該是反應性和自動的，這就是爲什麼我選擇了一個框架，而不是Jquery。但它看起來像Jquery會是更好的選擇，因爲我已經在幾個小時前解決了這個問題，並且不會在5個小時內陷入這樣一個愚蠢的事情。

來源

2017-04-06 KyleK

請參閱本節中的Vue的文檔中： https://vuejs.org/v2/guide/list.html#Caveats

您需要使用下面的方法之一獲得Vue的檢測陣列變化。

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue) 

// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

來源

2017-04-06 13:45:38

即使上面的答案在技術上也是正確的，我選擇了這一個，因爲我認爲它更容易推理，並且因爲你將我鏈接到Docs中的確切相關位置，我絕對應該發現之前，但沒有。 – KyleK

不要變異狀態，返回新：

EDIT_USER (state, user) { 
    const index = state.users.findIndex(element => element.id === user.id) 
    return state.users.map((element, i) => index === i ? user : element) 
},

上面會造成與舊的拍攝，除了一個匹配改變用戶ID的用戶對象用戶新的數組：在這種情況下，新將使用user。

來源

2017-04-06 13:35:21 dfsq

我試過了你的方法，它工作。我也嘗試了下面的方法，它也起作用。所以技術上這兩個答案都是正確的。不知道在這裏做什麼，在選擇正確的答案方面大聲笑但在這一點上，我認爲下面的方法會少'昂貴'，因爲你不創建一個全新的數組？糾正我，如果我錯了 – KyleK

獲取Vue更新對象更新

回答

相關問題