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

Question

I'm using Vuex and display data like this:

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

The problem that I have now is that when I change the ports state in another component it updates the ports state correctly but the port in the v-for loop is not updated.

How do I make sure the data in the port component rerenders correctly as well?

Answer 1

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

Most of the time, when you change a Vue instance's data, the view updates. But there are two edge cases:

1. When you are adding a new property that wasn't present when the data was observed.

2. When you modify an Array by directly setting an index (eg arr[0] = val) or modifying its length property.

If you are changing your ports data by doing something like this:

this.ports[0] = 1234;

Or something like this:

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

Then Vue won't be able to detect that a change occurred. You can get around this pitfall by doing:

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