javascript - Vue.js 正确重新渲染数组项

Question

我在 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 !

我怎样才能做到这一点？

Answer 1

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