CODEWITHSUNDEEP
vue.js
Marius Susanu
Marius Susanu

Reputation: 58

Field keeps old value after update

I have a form which is saved using ajax after each change in one of the fields. The response from the ajax request is used to update some data in that instance but does not update the data that is used in my form.

The problem is when i change one of the fields, switch fast to the next field and start typing, it changes back to the value that it had before the ajax call after the request is done.

Code sample:

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>

How to reproduce: https://jsfiddle.net/3au4m5qw/1/

Try changing the value of postcode and then switch fast to the next field (city) and change the value to something else. You will see that the value is back to the original.

EDIT: jsfiddle with v-model.lazy: https://jsfiddle.net/hym63pL7/

Upvotes: 1

Views: 739

Answers (2)

Felipe Guizar Diaz
Felipe Guizar Diaz

Reputation: 331

I think even changing to v-model the data from the ajax request won't be displayed because the data values will change but they won't be rendered. You need to wait until the DOM is updated using nextTick.

https://v2.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);
        },
    }
});

Similar issue here:

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

Upvotes: 0

orhon
orhon

Reputation: 104

Use 

v-model="billing_address.city"

instead of :value. V-model is two way binding and fixes your issue.

Upvotes: 1

Related Questions