Question

我想在单击“提交”按钮时以及在提交表单之前显示加载文本。我尝试了这段代码。

<button type="button" @click="addCustomers" 
:disabled="disableSubmitButton" class="btn btn-primary" style="float: 
right;" value="ADD CUSTOMER">{{customer.loading ? "Loading..." : "ADD 
CUSTOMER"}}</button>

在数据中添加加载对象之后。

data(){
  return {
    loading: false,
  }
}

当我调用点击事件函数时，我添加了"loading = true"以显示我的加载文本。

，但是此过程不起作用。我怎么显示它。我不希望任何微调器在vuejs中加载程序包。这是我的点击事件功能。

addCustomers(){
   customer.loading = true;
   axios.post(){
     ....
   }
}

Answer 1

数据对象属性中未提及customer数据元素，因此您的代码应类似于：

 <button type="button" @click="addCustomers" 
 :disabled="disableSubmitButton" class="btn btn-primary" style="float: 
 right;" value="ADD CUSTOMER">{{loading ? "Loading..." : "ADD 
 CUSTOMER"}}</button>

以及方法：

 addCustomers(){
   this.loading = true;
    axios.post().then(res=>{
         this.loading=false;
       }).catch(err=>{
        //handle error
       })
  }

想要在提交之前显示加载文本

1 个答案: