Home

Hi,

I had the next case today.
Here is my module:

<script>
    import Currency from '~components/currency.vue';

    export default {
        props: ['installment'],
        computed: {
            classObject: function () {
                return {
                    'alert-danger': this.installment.status === 'DUE',
                    'alert-success': this.installment.status === 'PAID',
                    'alert-info': this.installment.status === 'PENDING'
                };
            }
        },
        methods: {
            async pay () {
                this.$store.commit('PAY_INSTALLMENT');
                this.$store.commit('SET_STATUS', 'CONFIRMED');
            }
        },
        render(h) {
            return (
                    <div class={{ ...{ 'alert': true, 'col-md-2': true }, ...this.classObject }}>
                        {this.installment.label}
                        <Currency value={this.installment.amount}></Currency>
                        { this.installment.status === 'DUE' ?
                                <input class="btn btn-default" type="button" onClick={this.pay} value="Pay"/> : '' }
                    </div>
            )
        }
    }
</script>

After, I’ve updated the classObject function. At the browser console it says:

However, the actual application was not updated. I need to refresh the page. I have no idea if it could be “fixed” somehow, but it would be really nice to have the hot reload for the jsx applications.