修改實例數據，而AJAX提交，恢復輸入數據

我有我的Vue例如下面的方法：修改實例數據，而AJAX提交，恢復輸入數據

ajaxSubmit: function(event) { 
     this.loader = true; 

     var form = event.target; 

     var action = form.getAttribute('action'); 
     var data = new FormData(form); 
     var method = form.getAttribute('method').toUpperCase(); 

     this.$http({ 
      body: data, 
      method: method, 
      url: action 
     }).then(function(response) { 
      if (response.body.alerts) { 
       response.body.alerts.forEach(function(alert) { 
        this.alerts.push(alert); 
       }.bind(this)); 
      } 

      this.loader = false; 
     }, function(response) { 
      // same as success callback 
     }); 
    }

比方說，我有一個「測試」的默認值的輸入。如果我更新爲「Test111」然後提交。該值將恢復爲「測試」。提交的值是正確的，因爲「Test111」被保存到我的數據庫中，並且在刷新後，輸入具有正確的值。

我設法縮小了這個問題。我觀察到，只有在ajaxSubmit方法中更改實例上的數據時纔會發生。例如，如果我刪除行：

this.loader = true; 
this.loader = false; 
this.alerts.push(alert);

一切都按預期工作。

此外，如果輸入通過v-model綁定到實例，則不會恢復其值。

因此，最終我想我發現了問題的根源，但我不明白，而且我也解決不了。

任何幫助將不勝感激！

來源

2016-12-30 Illes Peter

@craig_h它是一個大型應用程序的一部分，但我設法將一個簡單的小提琴放在一起，它複製了這個問題：https://jsfiddle.net/ilpet/v3xx02n9/ –

您遇到的問題是Vue在提交後重新呈現輸入元素，並且因爲您已設置了value屬性，它將始終使用初始值重新呈現。要解決這個問題的方法是要麼沒有初始值，在這種情況下Vue將保持內容，或使用v-model並將其綁定到數據：

HTML

<input type="text" name="test" v-model="inputVal" />

的JavaScript

... 
data:{ 
    ... 
    inputVal: "Test" 
    ... 
} 
...

這是你更新的jsfiddle：https://jsfiddle.net/v3xx02n9/1/

來源

2017-01-02 11:13:21

沒有其他方法嗎？我知道它適用於將數據綁定到數據的情況，但這不是解決方案，因爲我無法普遍使用此方法，而無需知道底層表單的字段。沒有初始值也不是一個選項，因爲它是一個編輯窗體。 –

@IllesPeter不完全確定障礙物的位置，通常我們不會在html中設置初始值，但將vue設置爲「data」，並讓vue設置爲我們顯示的值。 –

@潘俊傑潘俊傑嗯，表單由服務器端腳本填充，這就是爲什麼會出現這個問題。現在我可以看到，更好的方法是做這個客戶端，但在這個項目的這個時候這將是一個非常大的努力。 –

修改實例數據，而AJAX提交，恢復輸入數據

回答

相關問題