Vue 2 + Axios - 显示/隐藏 div 作为 Axois 请求结果的结果

Question

我的 html 页面中有一个 div

<div class="ui-alert" v-show="isCaptchaError"> ... </div>

isCaptchaError - 在我的 Vue 实例中初始化：

const form = new Vue({
    el: '#main-form',
    data: {
        isCaptchaError: false,
    },

在我的输入观察程序中，我正在创建 axios 请求并设置 this.isCaptchaError = true

const form = new Vue({
    el: '#main-form',
...
    watch: {
        phoneNumber(val) {
                        axios({
                            method: 'post',
                            url: '/rest/client',
                            data: ajaxRequest
                        }).then(function (response) {
                            this.isCaptchaError = true;
                        })
        }
    }

但是div没有显示。 如果我在任何按钮上设置 this.isCaptchaError = true 单击，则 div 显示

如何在axios请求结果后隐藏/显示div？

Answer 1

尝试以下方法

async phoneNumber(val) {
  const response = await axios({
    method: 'post',
    url: '/rest/client',
    data: ajaxRequest
  })
  this.isCaptchaError = true
}