Vue.js 正确重新渲染数组项
Vue.js rerender array item correctly
我在 vue.js
2 中有一个数组,结构如下:
data() {
return {
ports: [
{ id: 1, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]},
{ id: 2, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 3, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 4, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
]
}
}
我想用 id 1
替换 port
的 scores
。我知道我可以像这样替换整个端口:
Vue.set(this.ports, 0, newPort);
但是 port
对象上的 scores
不再是 reactive
,它在我的子组件中也不再是 rerender
!
我怎样才能做到这一点?
But then scores on the port object is not reactive anymore and it does not rerender in my subcomponents!
scores
属性 将是反应式的,前提是它在 Vue.set
调用时存在于 newPort
对象上。
I want to replace the scores of port with id 1.
为什么要替换整个端口对象而不是仅仅替换分数?这将起作用:
this.ports.find(port => port.id === 1).scores = newScores
我在 vue.js
2 中有一个数组,结构如下:
data() {
return {
ports: [
{ id: 1, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]},
{ id: 2, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 3, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
{ id: 4, name: "example", "age": 10, scores: [ {index: 1, value: 100}, {index: 2, value: 200} ]}
]
}
}
我想用 id 1
替换 port
的 scores
。我知道我可以像这样替换整个端口:
Vue.set(this.ports, 0, newPort);
但是 port
对象上的 scores
不再是 reactive
,它在我的子组件中也不再是 rerender
!
我怎样才能做到这一点?
But then scores on the port object is not reactive anymore and it does not rerender in my subcomponents!
scores
属性 将是反应式的,前提是它在 Vue.set
调用时存在于 newPort
对象上。
I want to replace the scores of port with id 1.
为什么要替换整个端口对象而不是仅仅替换分数?这将起作用:
this.ports.find(port => port.id === 1).scores = newScores