Vue.js v-if not re rendering

Question

I have defined the following on my HTML:

<span v-if="valido" class="fas fa-check" style="position: absolute; right: 44px; top: 43px; color: green"></span>
<span v-else class="fas fa-exclamation-circle" style="position: absolute; right: 44px; top: 43px; color: red"></span>

Then I have this in my VM

data: {
    valido: false
}

And this function is being called when a input changes value

    validarRestricciones: function () {

        var empid = this.inputValue.substring(this.inputValue.indexOf('(') + 1, this.inputValue.length - 1);

        $.ajax({
            type: 'get',
            url: '/api/personas/validar?empid=' + empid,
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            statusCode: {
                200: function (data) {
                    this.valido = true;
                    return true;
                },
                412: function (data) {
                    this.valido = false;
                    return false;
                },
                500: function (data) {
                    return false;
                }
            }
        });
    }

Everything works fine and I can see in the console that valido changes from false to true but it does not change or redraw the spans that are attached to valido property. It seems that it is only done on the creation of the Vue component. How can I redraw that??.

try doing a binding of the context on the function for the status 200: function(data) { this.valido = true; return true; }.bind(this) — Kevin Chacón, Nov 14 '19 at 15:00
@KevinChacón that actually worked!!.. Don´t no why tho.. gonna google it — NicoRiff, Nov 14 '19 at 15:03
https://stackoverflow.com/questions/2236747/what-is-the-use-of-the-javascript-bind-method — Muhammad, Nov 14 '19 at 15:09

score 3 · Accepted Answer · answered Nov 14 '19 at 14:58

Are you sure it's actually changing the value of "valido" you set in the data property? At the beginning of the function try setting "this" to a variable, like "let vm = this", and then within the inner functions where you change "valido" call "vm.valido = false" for example.

It's possible "this.valido" is being assigned to the status code function immediately surrounding it rather than the one set in the data variable.

Vue.js v-if not re rendering

1 Answers1