javascript - Vue.js v-if 不重新渲染

Question

我在我的 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>

然后我在我的 VM 中有这个

data: {
    valido: false
}

当输入改变值时调用此函数

    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;
                }
            }
        });
    }

一切正常，我可以在控制台中看到 valido 从 false 更改为 true 但它不会更改或重绘跨度附加到 valido 属性。好像只是在 Vue 组件的创建上完成的。我怎样才能重画那个？？。

Answer 1

你确定它真的改变了你在数据属性中设置的“valido”的值吗？在函数的开头尝试将“this”设置为一个变量，例如“let vm = this”，然后在更改“valido”的内部函数中调用“vm.valido = false”。

“this.valido”可能被分配给紧邻它的状态代码函数，而不是数据变量中设置的函数。