CODEWITHSUNDEEP
javascriptvue.jsstatevuexrerender
Jenssen
Jenssen

Reputation: 1871

Vue.js vuex props don't rerender

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?

Upvotes: 0

Views: 246

Answers (1)

pretzelhammer
pretzelhammer

Reputation: 15105

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 (e.g. 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);

Upvotes: 1

Related Questions