字段在更新后保持旧值答案

【问题标题】：Field keeps old value after update字段在更新后保持旧值
【发布时间】：2020-01-18 11:57:48
【问题描述】：

我有一个表单，在其中一个字段每次更改后使用 ajax 保存。来自 ajax 请求的响应用于更新该实例中的一些数据，但不会更新我的表单中使用的数据。

问题是当我更改其中一个字段，快速切换到下一个字段并开始输入时，它会在请求完成后变回 ajax 调用之前的值。

代码示例：

var vueCheckout = new Vue({
    el: document.getElementById('vue-container'),
    data: {
        billing_address: {
            'postcode' : '',
            'city' : ''
        },
        shipping_address: {
            'postcode' : '',
            'city' : ''
        }
    },

    mounted: function () {
        this.billing_address = {postcode: 'postcode', city: 'city'};
        this.shipping_address = {postcode: '2', city: '2'};
    },

    methods: {
        changeAddress: function(type, key, event) {
            this[type][key] = event.target.value;

            var $this = this;

            setTimeout(function(){
                $this.shipping_address = {postcode: '3', city: '3'};
            }, 1000);
        },
    }
});

<div id="vue-container">
    <div>
    <input type="text" name="billing[postcode]" :value="billing_address.postcode" @change="changeAddress('billing_address','postcode',$event)" maxlength="5">
    <input type="text" name="billing[city]" :value="billing_address.city" @change="changeAddress('billing_address','city',$event)">
    </div>
    <div>
    <span>{{ shipping_address.postcode }}</span> - <span>{{ shipping_address.city }}</span>
    </div>
</div>

如何重现： https://jsfiddle.net/3au4m5qw/1/

尝试更改邮政编码的值，然后快速切换到下一个字段（城市）并将值更改为其他值。您会看到该值恢复到原来的值。

编辑：jsfiddle 与 v-model.lazy：https://jsfiddle.net/hym63pL7/

【问题讨论】：

如果你想解决这个问题，最简单的方法是在请求返回之前禁用输入。另一种可能性是不再更新表单，而只是在更改时将当前状态发送到后端。
嗨@ssc-hrep3，我必须更新表格。如果我找不到其他解决方案，我将使用您提到的解决方案，如果请求正在进行，我将禁用输入。谢谢！

标签： vue.js

【解决方案1】：

使用

v-model="billing_address.city"

而不是:value。 V-model 是双向绑定，可以解决你的问题。

【讨论】：

我已经检查过了，它适用于 v-model，但适用于 v-model.lazy 它不起作用 (jsfiddle.net/hym63pL7)。你认为有可能让它与 v-model.lazy 一起工作吗？
这应该被标记为答案，因为它回答了 OP。

【解决方案2】：

我认为即使更改为v-model，来自 ajax 请求的数据也不会显示，因为数据值会更改但不会呈现。您需要等到使用 nextTick 更新 DOM。

https://vuejs.org/v2/api/#Vue-nextTick

var vueCheckout = new Vue({
    el: document.getElementById('vue-container'),
    data: {
        billing_address: {
            'postcode' : '',
            'city' : ''
        },
        shipping_address: {
            'postcode' : '',
            'city' : ''
        }
    },

    mounted: function () {
        this.billing_address = {postcode: 'postcode', city: 'city'};
        this.shipping_address = {postcode: '2', city: '2'};
    },

    methods: {
        changeAddress: function(type, key, event) {
            this[type][key] = event.target.value;

            var $this = this;

            setTimeout(function(){
                $this.$nextTick(function() {
                  $this.shipping_address = {postcode: '3', city: '3'};
                })
            }, 1000);
        },
    }
});

这里有类似的问题：

https://laracasts.com/discuss/channels/vue/vuejs-20-data-gotten-from-backend-via-ajax-can-not-be-shown-in-view

【讨论】：