I am currently using Vue.js for my frontend development and I have a JSON object that I need to map to set certain properties in my data().
I have confirmed that the server connection is working and that the JSON object is received properly.
In my computed() method, I have implemented logic to map all items from the JSON object, set the property values, sort them alphabetically, and then display them in the view.
I have searched on StackOverflow but couldn't find a solution to my specific issue.
I came across some information in the Vue documentation about Vue.set, but I am not sure how to apply it in my case: https://v2.vuejs.org/v2/api/#Vue-set
data: function() {
return {
itemListModel: {
className: "myStuff",
items: [],
name: "",
id: "",
description: ""
}
}
},
methods: {
mapToModel: model => {
return model.items.map(element => {
return {
className: model.className,
value: element.items,
id: element.id,
name: element.name,
description: element.description
};
});
},
getAllItemsFromDb() {
const url = "https://localhost:44339/ListAll";
axios
.get(url, {
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
this.itemListModel = response.data;
});
},
computed: {
categorizedItems() {
let allItems = this.mapToModel(this.itemListModel);
alert(allItems);
//code continues for other logic
},
itemResultsFromDB: function() {
let vm = this;
return vm.wordListModel;
//this gets the JSON Object from the database and sets the itemListModel if it is an empty object. The class name, items, name, id and description are in the JSON object from the backend that I'd like to access.
}
The JSON object structure is as follows:
{"myStuff":[{"name": "foo", "id": "guid-string", "description": "blah,blah..."}]}
"Error, cannot read property of 'map' of undefined at VueComponent.mapToModel"
How can I resolve this issue?
Even when I edit my itemListModel to just an empty object {}, I still encounter the same error.