想在使用Vue.js提交之前顯示加載文本

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

當我調用click事件函數時，我添加"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
       })
  }