Vue组件不会进行反应性更新

Question

我有一个简单的组件。 并且它在第一次呈现时就很好，但是当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>

Answer 1

奇怪，因为子道具的父对象是被动的，所以如果通过道具传递的数据发生变化，则子组件中的道具应相应更新。

也许像这样尝试使用计算属性

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

另一个问题可能与数据本身的反应性有关，也许您正在错误地更新它，因此它没有反应性。 您应该检查是否通过Vue DevTools收到了正确的更新道具。