热衷于更改 vue 3 中的导出数据 &

Question

这是我的代码

export default {
    name: 'form-loading-spinner',
    data(){  
        return{
            loading: false,
            form : {
                phone: "",
                token: null,
            },
        }
    },
    methods:{
            recaptcha(){
                this.loading = true;                
                let form = this.form;               
                    grecaptcha.ready(function() {                                  
                        grecaptcha.execute('XXXXXXXXXXXXXXXXXX', {action: 'submit'}).then(function(token) {                                     
                            form.token =  token;
                            Inertia.post("/phone/send", form, {
                                preserveScroll: true, onSuccess: () => this.loading = false
                            })
                            });                        
                        }) 
                        // this.loading = false; not working                     
            },
            reset(){
                this.loading =  false;
            },

    }
}

这是启动按钮上的微调器

this.loading = true; 

这是按钮逻辑

  <button type="submit" :disabled="form.processing">
  <span >send</span>                                    
  <svg v-if="loading" .../></svg>
  </button>  

我正在尝试通过此代码停止旋转器

onSuccess: () => this.loading = false

但是我收到了这个错误： 未捕获（承诺中）类型错误：无法设置未定义的属性（设置“正在加载”）

我认为我无法从 grecaptcha 函数获取 data.loading，但也许有某种方法。 谢谢

Answer 1

我建议阅读：https://www.codementor.io/@dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc

在您的情况下，您可以创建一个临时变量

self

并在

this

在使用的上下文中表示其他含义时使用它来代替

this

。

recaptcha() {
    const self = this;
    this.loading = true;                
    let form = this.form;               
    grecaptcha.ready(function() {                                  
        grecaptcha.execute('XXXXXXXXXXXXXXXXXX', {action: 'submit'}).then(function(token) {                                     
            form.token =  token;
            Inertia.post("/phone/send", form, {
                preserveScroll: true, onSuccess: () => self.loading = false
            })
        });                        
    }) 
    // this.loading = false; not working                     
},