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} ]}
        ]
    }
}

我要将scores的{{1}}替换为ID port。我知道我可以像这样替换整个端口：

但是然后Vue.set(this.ports, 0, newPort);对象上的scores不再是port了，它在我的子组件中也不再reactive了！

我该怎么做？

Answer 1

但是端口对象上的分数不再是反应性的，并且不会在我的子组件中重新呈现！

如果scores调用时newPort对象上存在Vue.set属性，则该属性为反应性。

我想用ID 1替换port的分数。

为什么要替换整个端口对象而不是仅替换分数？这将起作用：

this.ports.find(port => port.id === 1).scores = newScores

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

1 个答案: