Question

我正在使用Vuex并显示以下数据：

<template>
    <div>
        <div>
            <div v-for="port in ports">
                <port :port="port"></port>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        computed: {
            ...mapState({
                ports: state => state.ports.ports,
            })
        }
    }
</script>

我现在遇到的问题是，当我在另一个组件中更改ports state时，它会正确更新ports state，但是v-for循环中的端口未更新。

如何确保端口组件rerenders中的数据也正确？

Answer 1

Vue Beginner Gotchas: Why isn't the DOM updating?

大多数情况下，当您更改Vue实例的数据时，视图就会更新。但是有两种情况：



要添加观察数据时不存在的新属性。



当您通过直接设置索引（例如arr [0] = val）或修改其length属性来修改Array时。

如果您通过执行以下操作更改端口数据：

this.ports[0] = 1234;

或者类似这样的东西：

this.ports[4].property = 'some value';

然后Vue将无法检测到发生了更改。您可以通过以下方法解决这个陷阱：

Vue.set(this.ports, 0, 1234);

Vue.js vuex道具不会重新渲染

1 个答案: