Vue компонент не обновляется реактивно - PullRequest
Новая
       34

Vue компонент не обновляется реактивно

0 голосов
/ 23 января 2019

У меня такой простой компонент.И в первый раз он хорошо отрисовывается, но когда меняется result реквизит, с ним ничего не происходит, все классы остаются одинаковыми. 

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

1 Ответ

0 голосов
/ 23 января 2019

Странно, так как родительские и дочерние реквизиты являются реактивными, поэтому, если данные, передаваемые в качестве реквизита, изменяются, реквизит внутри дочернего компа должен обновляться соответствующим образом.

Возможно, попробуйте использовать вычисляемое свойство, например 

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

Другая проблема может быть связана с реактивностью самих данных, возможно, вы неправильно обновляете их, поэтому они не реактивны.Вы должны проверить, получаете ли Вы правильно обновленный реквизит через Vue DevTools.

...