-
[MODIFY_SHAKE_PRIZE](state, data) { let tmp = state.prizeList.list.find((i) => i.id === data.id) tmp.name = data.name tmp.icon = data.icon tmp.probability = data.probability tmp.expired_at = data.expired_at }
这是我现在的代码, 其中 state.prizeList.list 是一个数组, 其值是一个个对象, data也是一个对象, 结构和数组里的对象完全一样...
现在问题是, 根据id, 我把需要修改的的对象找出来了(tmp), 如果直接把data复制给tmp, states是更新了, 但是视图不会更新, 难道只能把对象里的值一个个赋过去吗, 对象字段少还行, 多的话, 这么写实在有点蛋疼...有没有优雅点的写法...如果是在vm中还可以用set, vuex中该怎么写.?
6
POSTS1.2k
Log in to reply
VIEWS - Ginhing
let list = state.prizeList.list let index = list.findIndex(obj => obj.id === data.id) index > -1 && Vue.set(list, index, { ...list[index], data })
- 林岑影
我用set后, vuex和component的数据都更新了, 但是视图还是不更新...
- haocong
根据官网关于数组变动检测部分的介绍:http://vuejs.org.cn/guide/list.html#替换数组
可以通过下面的方法来实现需求:state.prizeList.list = state.prizeList.list.filter(item => item.id !== data.id) // 删除符合条件的元素,并将新数组替换原来的数组 state.prizeList.list.push(data) // 将新元素压入数组中
这样就能实现视图的更新了,不过这样会造成替换的元素在数组末尾,而不是原来元素的位置。
Vue.js大法好。
0 - 林岑影
@haocong said:
根据官网关于数组变动检测部分的介绍:http://vuejs.org.cn/guide/list.html#替换数组
可以通过下面的方法来实现需求:state.prizeList.list = state.prizeList.list.filter(item => item.id !== data.id) // 删除符合条件的元素,并将新数组替换原来的数组 state.prizeList.list.push(data) // 将新元素压入数组中
这样就能实现视图的更新了,不过这样会造成替换的元素在数组末尾,而不是原来元素的位置。
谢谢回答, 不过这样还是改变了顺序, 不太好...
let obj = state.prizeList.list.find((i) => i.id === data.id) for (let i in obj) { if (obj.hasOwnProperty(i) ) { obj[i] = data[i] } }
目前暂时只能用这方法了
- papersnake
Object.assign(state, data)
我用assign 一句搞定啊
针对你的
let tmp = state.prizeList.list.find((i) => i.id === data.id) Object.assign(tmp,data)
转载于:https://my.oschina.net/dawd/blog/808158