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 检查您是否收到了正确的更新道具。