How to bind the same template multiple times in vue.js?

Question

Submitting a page form results in an ajax call to a backend service which returns an json object. The object is than bound to a vue.js template (a div with a particular id). Everythiong works as expected on the first submit. However, the view is not updated on any following form submits (it still shows the data from the first submit).

<div id="Response"></div>

$('#Form').submit(function (e) {
    e.preventDefault();
    var $form = $(e.target);
    $.ajax({
        url: 'https://somewhere,
        type: 'POST',
        data: $form.serialize(),
        dataType: 'json',
        success: function(response) {
            if (response) {
                var app = new Vue({
                    el: '#Response',
                    data: response
                });
            }
        }
    });
});

How to do this properly so each time the form is submitted, the view is updated appropriately based on the last response?

Dag Mikkelsen · Accepted Answer · 2017-11-21 13:10:01Z

1

Now you are creating a new vue instance with each response. You need to mount the vue instance first, then use the response to update the data in it.

answered Nov 21, 2017 at 13:10

Dag Mikkelsen

1912 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alik Over a year ago

It's just not that straightforward as I could not update the data property directly (as one should not replace the root data object) but I need to create a new property in it and use that to store the response object.

Collectives™ on Stack Overflow

How to bind the same template multiple times in vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related