In my model, I am initializing an array after the model is mounted when an AJAX call is successful.
var self = this;
$.getJSON("somejson.json",
function (data) {
var list = [];
list = data.list.map(function (item) {
return { id: item.id, text: item.text };
});
self.selectableItems = list;
});
For each item in the selectableItems array, I have a click method that removes the item.
select: function (item) {
this.selectableItems.pop(item);
},
Initially, selectableItems renders correctly. However, when I modify the array, the DOM does not update accordingly, although the array is updated correctly.
To confirm this, I created a computed property that returns the count of selectableItems. The count updates correctly when an item is removed, but the DOM does not reflect the change.
I also noticed that hard coding the value of selectableItems in the AJAX call results in everything working as expected!
self.selectableItems = [{ id: 1, text: "adsad"}];
While I am aware of the pitfalls of array mutation in Vue, I believe I might be overlooking something simple, as I am relatively new to exploring Vue. Can someone help point out what I may be missing?