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.