获取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更新对象更新

回答

相关问题