热门更改vue 3中的导出数据& [重复]

qacovj5a  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(127)

此问题在此处已有答案

How to access the correct this inside a callback(15个答案)
25天前关闭。
这是我的代码

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

    }
}

字符串
这将启动按钮上的微调器
第一个月
这是按钮逻辑

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


我试图通过以下代码阻止Spinner
onSuccess:()=>这个.正在载入= false
但是我得到了这个错误:Uncocked(in promise)TypeError:无法设置undefined的属性(设置“加载”)
我想我不能得到数据。从gresaptcha函数加载,但也许有一些方法。谢谢

uhry853o

uhry853o1#

我推荐阅读: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                     
},

字符串

相关问题