Question

我的Vue实例上有以下方法：

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

假设我输入的默认值为＆＃34;测试＆＃34;。如果我将其更新为＆＃34; Test111＆＃34;然后提交。该值将恢复为＆＃34;测试＆＃34;。提交的值是正确的，如＆＃34; Test111＆＃34;保存到我的数据库，并在刷新后，输入具有正确的值。

我设法缩小了问题的范围。我观察到只有在ajaxSubmit方法中我才更改实例上的数据。例如，如果我删除行：

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

一切都按预期工作。

此外，如果输入通过v-model绑定到实例，则它不会还原其值。

所以，最后我想我找到了问题的根源，但我不理解它，我无法解决它。

非常感谢任何帮助！

Answer 1

您遇到的问题是Vue在提交后重新呈现输入元素，并且因为您设置了value属性，它将始终使用初始值重新呈现。解决这个问题的方法是要么没有初始值，在这种情况下Vue会保留内容，要么使用v-model并将其绑定到数据：

<强> HTML

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

<强>的JavaScript

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

这是您更新的JSFiddle：https://jsfiddle.net/v3xx02n9/1/

在ajax提交时修改实例数据，还原输入数据

1 个答案: