Vue js : Async await with vue js returns observer
0
Currently I'm trying to get data from api and read it in an array. The problem is
when I log the data response data from api, it shows the data. I assign the value of variable to data from await. When I console.log it shows that the value of variable is obsever. I tried with async/await. Installed
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async getCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
mounted() {
this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
This is what I'm getting: cat -> [__ob__: Observer]
This method also, seems not to help. What am I doing wrong?
I'm struggling with this problem for hours.. Checked many options in stackoverflow, but none seems to work (or I'm doing smth wrong). I am new in vuejs, I would be really pleased to answers!
javascript vue.js async-await
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
add a comment |
0
Currently I'm trying to get data from api and read it in an array. The problem is
when I log the data response data from api, it shows the data. I assign the value of variable to data from await. When I console.log it shows that the value of variable is obsever. I tried with async/await. Installed
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async getCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
mounted() {
this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
This is what I'm getting: cat -> [__ob__: Observer]
This method also, seems not to help. What am I doing wrong?
I'm struggling with this problem for hours.. Checked many options in stackoverflow, but none seems to work (or I'm doing smth wrong). I am new in vuejs, I would be really pleased to answers!
javascript vue.js async-await
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
you does nothing wrong (although the async/awaits are useless),this.categoriesis observer created byvue
– apple apple
Dec 28 '18 at 8:01
how can I convert it to json? Can you please help?JSON.parse(this.categories)andmethods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }
– Nodirabegimxonoyim
Dec 28 '18 at 8:03
add a comment |
0
0
0
Currently I'm trying to get data from api and read it in an array. The problem is
when I log the data response data from api, it shows the data. I assign the value of variable to data from await. When I console.log it shows that the value of variable is obsever. I tried with async/await. Installed
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async getCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
mounted() {
this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
This is what I'm getting: cat -> [__ob__: Observer]
This method also, seems not to help. What am I doing wrong?
I'm struggling with this problem for hours.. Checked many options in stackoverflow, but none seems to work (or I'm doing smth wrong). I am new in vuejs, I would be really pleased to answers!
javascript vue.js async-await
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
Currently I'm trying to get data from api and read it in an array. The problem is
when I log the data response data from api, it shows the data. I assign the value of variable to data from await. When I console.log it shows that the value of variable is obsever. I tried with async/await. Installed
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async getCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
mounted() {
this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
This is what I'm getting: cat -> [__ob__: Observer]
This method also, seems not to help. What am I doing wrong?
I'm struggling with this problem for hours.. Checked many options in stackoverflow, but none seems to work (or I'm doing smth wrong). I am new in vuejs, I would be really pleased to answers!
javascript vue.js async-await
javascript vue.js async-await
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
asked Dec 28 '18 at 7:58
NodirabegimxonoyimNodirabegimxonoyim
128111
128111
you does nothing wrong (although the async/awaits are useless),this.categoriesis observer created byvue
– apple apple
Dec 28 '18 at 8:01
how can I convert it to json? Can you please help?JSON.parse(this.categories)andmethods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }
– Nodirabegimxonoyim
Dec 28 '18 at 8:03
add a comment |
you does nothing wrong (although the async/awaits are useless),this.categoriesis observer created byvue
– apple apple
Dec 28 '18 at 8:01
how can I convert it to json? Can you please help?JSON.parse(this.categories)andmethods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }
– Nodirabegimxonoyim
Dec 28 '18 at 8:03
you does nothing wrong (although the async/awaits are useless),
this.categories is observer created by vue– apple apple
Dec 28 '18 at 8:01
you does nothing wrong (although the async/awaits are useless),
this.categories is observer created by vue– apple apple
Dec 28 '18 at 8:01
how can I convert it to json? Can you please help?
JSON.parse(this.categories) and methods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }– Nodirabegimxonoyim
Dec 28 '18 at 8:03
how can I convert it to json? Can you please help?
JSON.parse(this.categories) and methods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }– Nodirabegimxonoyim
Dec 28 '18 at 8:03
add a comment |
3 Answers
3
active
oldest
votes
0
Could you try this?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
add a comment |
0
You're logging this.categories before this.getCategories() has resolved, in which case this.categories would still be an empty array. Note the __ob__ property is automatically inserted by Vue and used for reactivity.
You should await that method beforehand:
async mounted() {
await this.getCategories();
console.log("cat ", this.categories);
}
demo
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
It returns acat Promise {<pending>}for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`
– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removedawaitwhen assigningthis.categories. The only change needed in your original code is to prefixmountedwithasync, and then addawaitinsidemounted(). See demo
– tony19
Dec 28 '18 at 8:17
add a comment |
0
You can simply log after received the data
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.log('cat ',data)
this.categories = data
}
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
Tried thismethods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem.Prints :data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct dataYou can simply log after received the databeacuse I want to use the data in form
– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you tryconsole.log(this.categories.concat())?
– apple apple
Dec 28 '18 at 8:31
1
how aboutconsole.log(this.categories.data.concat())
– apple apple
Dec 28 '18 at 8:43
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53955349%2fvue-js-async-await-with-vue-js-returns-observer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Could you try this?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
add a comment |
0
Could you try this?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
add a comment |
0
0
0
Could you try this?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
Could you try this?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories:
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.log("cat ", this.categories);
}
};
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
answered Dec 28 '18 at 8:14
Adem yalçınAdem yalçın
321
321
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
add a comment |
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
I thinkt it should be getCategories() not imageCategories() in methods option. Didn;t work with fixing the function name too. I tried this before. But, thank you for the answer.
– Nodirabegimxonoyim
Dec 28 '18 at 8:23
add a comment |
0
You're logging this.categories before this.getCategories() has resolved, in which case this.categories would still be an empty array. Note the __ob__ property is automatically inserted by Vue and used for reactivity.
You should await that method beforehand:
async mounted() {
await this.getCategories();
console.log("cat ", this.categories);
}
demo
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
It returns acat Promise {<pending>}for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`
– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removedawaitwhen assigningthis.categories. The only change needed in your original code is to prefixmountedwithasync, and then addawaitinsidemounted(). See demo
– tony19
Dec 28 '18 at 8:17
add a comment |
0
You're logging this.categories before this.getCategories() has resolved, in which case this.categories would still be an empty array. Note the __ob__ property is automatically inserted by Vue and used for reactivity.
You should await that method beforehand:
async mounted() {
await this.getCategories();
console.log("cat ", this.categories);
}
demo
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
It returns acat Promise {<pending>}for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`
– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removedawaitwhen assigningthis.categories. The only change needed in your original code is to prefixmountedwithasync, and then addawaitinsidemounted(). See demo
– tony19
Dec 28 '18 at 8:17
add a comment |
0
0
0
You're logging this.categories before this.getCategories() has resolved, in which case this.categories would still be an empty array. Note the __ob__ property is automatically inserted by Vue and used for reactivity.
You should await that method beforehand:
async mounted() {
await this.getCategories();
console.log("cat ", this.categories);
}
demo
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
You're logging this.categories before this.getCategories() has resolved, in which case this.categories would still be an empty array. Note the __ob__ property is automatically inserted by Vue and used for reactivity.
You should await that method beforehand:
async mounted() {
await this.getCategories();
console.log("cat ", this.categories);
}
demo
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
edited Dec 28 '18 at 8:17
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
answered Dec 28 '18 at 8:08
tony19tony19
23.4k44175
23.4k44175
It returns acat Promise {<pending>}for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`
– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removedawaitwhen assigningthis.categories. The only change needed in your original code is to prefixmountedwithasync, and then addawaitinsidemounted(). See demo
– tony19
Dec 28 '18 at 8:17
add a comment |
It returns acat Promise {<pending>}for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`
– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removedawaitwhen assigningthis.categories. The only change needed in your original code is to prefixmountedwithasync, and then addawaitinsidemounted(). See demo
– tony19
Dec 28 '18 at 8:17
It returns a
cat Promise {<pending>} for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`– Nodirabegimxonoyim
Dec 28 '18 at 8:15
It returns a
cat Promise {<pending>} for ` methods: { async getCategories() { this.categories = axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); return res.data; }); } }, async mounted() { await this.getCategories(); console.log("cat ", this.categories); }`– Nodirabegimxonoyim
Dec 28 '18 at 8:15
Sounds like you removed
await when assigning this.categories. The only change needed in your original code is to prefix mounted with async, and then add await inside mounted(). See demo– tony19
Dec 28 '18 at 8:17
Sounds like you removed
await when assigning this.categories. The only change needed in your original code is to prefix mounted with async, and then add await inside mounted(). See demo– tony19
Dec 28 '18 at 8:17
add a comment |
0
You can simply log after received the data
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.log('cat ',data)
this.categories = data
}
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
Tried thismethods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem.Prints :data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct dataYou can simply log after received the databeacuse I want to use the data in form
– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you tryconsole.log(this.categories.concat())?
– apple apple
Dec 28 '18 at 8:31
1
how aboutconsole.log(this.categories.data.concat())
– apple apple
Dec 28 '18 at 8:43
|
show 2 more comments
0
You can simply log after received the data
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.log('cat ',data)
this.categories = data
}
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
Tried thismethods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem.Prints :data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct dataYou can simply log after received the databeacuse I want to use the data in form
– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you tryconsole.log(this.categories.concat())?
– apple apple
Dec 28 '18 at 8:31
1
how aboutconsole.log(this.categories.data.concat())
– apple apple
Dec 28 '18 at 8:43
|
show 2 more comments
0
0
0
You can simply log after received the data
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.log('cat ',data)
this.categories = data
}
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
You can simply log after received the data
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.log('cat ',data)
this.categories = data
}
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
edited Dec 28 '18 at 8:28
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
answered Dec 28 '18 at 8:15
apple appleapple apple
2,4701723
2,4701723
Tried thismethods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem.Prints :data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct dataYou can simply log after received the databeacuse I want to use the data in form
– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you tryconsole.log(this.categories.concat())?
– apple apple
Dec 28 '18 at 8:31
1
how aboutconsole.log(this.categories.data.concat())
– apple apple
Dec 28 '18 at 8:43
|
show 2 more comments
Tried thismethods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem.Prints :data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct dataYou can simply log after received the databeacuse I want to use the data in form
– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you tryconsole.log(this.categories.concat())?
– apple apple
Dec 28 '18 at 8:31
1
how aboutconsole.log(this.categories.data.concat())
– apple apple
Dec 28 '18 at 8:43
Tried this
methods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem. Prints : data {data: Array(11)} cat {__ob__: Observer} cat {__ob__: Observer}– Nodirabegimxonoyim
Dec 28 '18 at 8:27
Tried this
methods: { async getCategories() { const response = await axios.get(${baseUrl}/feedback/search); const data = await response.data; console.log("data", data); this.categories = data; console.log("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.log("cat ", this.categories); }'. Didn't solve the problem. Prints : data {data: Array(11)} cat {__ob__: Observer} cat {__ob__: Observer}– Nodirabegimxonoyim
Dec 28 '18 at 8:27
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
@Nodirabegimxonoyim isn't the data correctly printed?
– apple apple
Dec 28 '18 at 8:28
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct data
You can simply log after received the data beacuse I want to use the data in form– Nodirabegimxonoyim
Dec 28 '18 at 8:29
Yes, response from api is printed, but again when I read it is not showing the result. Showing that it is observer instead. Also, I am printing it to see if I'm getting correct data
You can simply log after received the data beacuse I want to use the data in form– Nodirabegimxonoyim
Dec 28 '18 at 8:29
@Nodirabegimxonoyim can you try
console.log(this.categories.concat())?– apple apple
Dec 28 '18 at 8:31
@Nodirabegimxonoyim can you try
console.log(this.categories.concat())?– apple apple
Dec 28 '18 at 8:31
1
1
how about
console.log(this.categories.data.concat())– apple apple
Dec 28 '18 at 8:43
how about
console.log(this.categories.data.concat())– apple apple
Dec 28 '18 at 8:43
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53955349%2fvue-js-async-await-with-vue-js-returns-observer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you does nothing wrong (although the async/awaits are useless),
this.categoriesis observer created byvue– apple apple
Dec 28 '18 at 8:01
how can I convert it to json? Can you please help?
JSON.parse(this.categories)andmethods: { async getCategories() { await axios.get(${baseUrl}/feedback/search).then(res => { console.log("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.log("cat ", this.categories); }– Nodirabegimxonoyim
Dec 28 '18 at 8:03