Vue Ajax Data

Posted on  by admin
Modified2 years, 8 months ago.

I'm trying to populate a Vue with data from the JsonResult of an AJAX query.

My Vue receives the data just fine when I encode it from my View Model, but not when I try to retrieve it using AJAX. Here's what my code looks like:. This is with all of the proper includes. I know that @Url.Action("GetItems", "Settings") returns the correct URL and the data comes back as expected (as tested by an alert in the success function (see comment in success function in AJAX).

Populating it like so: var allItems = @Html.Raw(Json.Encode(Model)); works, but the AJAX query does not.

Am I doing something wrong? 2828 gold badges102102 silver badges151151 bronze badges.

151151 bronze badges. You can make the ajax call inside of the mounted function (“ready” in Vuejs 1.x). 4444 bronze badges.

Itchydon
2,479
5

2323 silver badges3636 bronze badges.

I had same problem, fixed by Samuel De Backer's answer above.

The problem is at ajax success callback function, .

if you use this.data, it is incorrect, because when 'this' reference the vue-app, you could use this.data, but here (ajax success callback function), this does not reference to vue-app, instead 'this' reference to whatever who called this function(ajax call).

PhilPhil
140k6

3030 bronze badges. I was able to solve my problem by performing my necessary action within the success handler on the AJAX call. You can either put the entire Vue object creation in there, or just set the data you need.

2828 gold badges102102 silver badges151151 bronze badges.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvuejs2javascript-framework or ask your own question.