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 收到了正确的更新道具。