CODEWITHSUNDEEP
typescriptvue.jsvue-componentvue-reactivity
vZ10
vZ10

Reputation: 2686

Vue component doesn't reactively update

I have such a simple component. And it renders fine at the first time, but when the result props changes nothing happens to it, all classes are still the same.

<template>
    <span class="icon" >
        <i :class="iconClass"></i>
    </span> 
</template>

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';

    @Component
    export default class Icon extends Vue {
        @Prop() result!: string;

        private StatusToClass: { [index: string] : string } = {
            'success': "has-text-success fas fa-check-circle",
            'warning': "has-text-warning fas fa-square",
            'noData':  "has-text-warning fas fa-square",
            'fail': "has-text-danger fas fa-exclamation-triangle",
        }

        get iconClass(){
            return this.StatusToClass[this.result];
        }
    }
</script>

Upvotes: 1

Views: 152

Answers (1)

Karolis Stakėnas
Karolis Stakėnas

Reputation: 758

Strange, as parent to child props are reactive, so if data passed as prop changes, the prop inside child comp should update accordingly.

Perhaps, try to use a computed property, like so

computed: {
  iconClass () {
    return this.StatusToClass[this.result]
  }
}

Other problem might be with the reactivity of data itself, perhaps You're updating it wrong so it's not reactive. You should check if You're receiving the correct updated prop via Vue DevTools.

Upvotes: 1

Related Questions