修改实例数据，而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提交，恢复输入数据

回答

相关问题