It seems like the issue is not related to VueJS or Axios, but rather a misunderstanding of Promises.
Your function operates asynchronously and utilizes Promises to resolve the problem, along with axios.
In order to have allContactsSaved() return true/false for later use, there are 3 options available:
1. Promises
Return a promise and utilize .then when allContactsSaved is invoked, as shown below:
// Function
// Returns promise
allContactsSaved() {
let promise = axios.get('/contacts').then(function (response) {
// check if every one is saved
const check = response.data.data.every(function(contact) {
return contact.saved;
});
return check;
}));
return promise;
}
// Implementing it:
allContactsSaved().then(function(isSaved) {
console.log(isSaved);
});
2. Callbacks
The first option might be preferable over this approach, which is more traditional.
// Function
// Returns promise
allContactsSaved(callback) {
axios.get('/contacts').then(function (response) {
// check if every one is saved
const check = response.data.data.every(function(contact) {
return contact.saved;
});
if(callback) {
callback(check);
}
}));
}
// Using it with a callback function:
allContactsSaved(function(isSaved) {
console.log(isSaved);
});
3. Async/await
This method is newer in ES6/7 and requires a transpiler depending on the JS engine version.
// Function
// Returns promise
async allContactsSaved() {
const resp = await axios.get('/contacts');
const check = response.data.data.every(function(contact) {
return contact.saved;
});
return check;
}
// Utilizing it, the calling function needs to be async:
async function() {
const result = await allContactsSaved();
console.log(result);
}