当我在Vuex中更新对象时,如何更新Vue js?
现在我有一个突变
EDIT_USER (state, user) {
const record = state.users.find(element => element.id === user.id)
let index = state.users.indexOf(record)
state.users[index] = user
},
这适用于Object级别,而在控制台中,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个小时。
答案 0 :(得分:2)
请参阅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)
答案 1 :(得分:0)
不要改变状态,返回新状态:
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
。