Mixing
[Vue warn]: Error in mounted hook: “ReferenceError: post_id is not defined”
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm making new Vue 2 component that shows likes count after like button hitted. And get the error:
app.js:5060 [Vue warn]: Error in mounted hook: "ReferenceError: post_id is not defined"
<template>
<span>
<i class="fa fa-heart"></i> {{ likescount }}
</span>
</template>
<script>
import { bus } from '../bootstrap';
import 'vuejs-noty/dist/vuejs-noty.css'
export default {
props: ["post_id"],
data: function() {
return {
likescount: 0,
}
},
created(){
bus.$on('postliked', (data) => {
this.updatelikescount(post_id);
});
},
mounted : function() {
post_id = {};
this.updatelikescount(post_id);
},
methods: {
updatelikescount(post_id) {
axios
.get('/blog/post/likecount/' + post_id)
.then(response => {
this.likescount = response.data.data[0][0]
})
.catch(response => console.log(response.data));
},
}
};
</script>
this is my blade template
<likepostcount
:post_id={{ $post->id }}
></likepostcount>
When I open the Vue Dev Tools, I see the post_id = 4
laravel vuejs2
asked Jan 3 at 16:08
pc soundpc sound
73
add a comment |
0
I'm making new Vue 2 component that shows likes count after like button hitted. And get the error:
app.js:5060 [Vue warn]: Error in mounted hook: "ReferenceError: post_id is not defined"
<template>
<span>
<i class="fa fa-heart"></i> {{ likescount }}
</span>
</template>
<script>
import { bus } from '../bootstrap';
import 'vuejs-noty/dist/vuejs-noty.css'
export default {
props: ["post_id"],
data: function() {
return {
likescount: 0,
}
},
created(){
bus.$on('postliked', (data) => {
this.updatelikescount(post_id);
});
},
mounted : function() {
post_id = {};
this.updatelikescount(post_id);
},
methods: {
updatelikescount(post_id) {
axios
.get('/blog/post/likecount/' + post_id)
.then(response => {
this.likescount = response.data.data[0][0]
})
.catch(response => console.log(response.data));
},
}
};
</script>
this is my blade template
<likepostcount
:post_id={{ $post->id }}
></likepostcount>
When I open the Vue Dev Tools, I see the post_id = 4
laravel vuejs2
asked Jan 3 at 16:08
pc soundpc sound
73
add a comment |
0
0
0
I'm making new Vue 2 component that shows likes count after like button hitted. And get the error:
app.js:5060 [Vue warn]: Error in mounted hook: "ReferenceError: post_id is not defined"
<template>
<span>
<i class="fa fa-heart"></i> {{ likescount }}
</span>
</template>
<script>
import { bus } from '../bootstrap';
import 'vuejs-noty/dist/vuejs-noty.css'
export default {
props: ["post_id"],
data: function() {
return {
likescount: 0,
}
},
created(){
bus.$on('postliked', (data) => {
this.updatelikescount(post_id);
});
},
mounted : function() {
post_id = {};
this.updatelikescount(post_id);
},
methods: {
updatelikescount(post_id) {
axios
.get('/blog/post/likecount/' + post_id)
.then(response => {
this.likescount = response.data.data[0][0]
})
.catch(response => console.log(response.data));
},
}
};
</script>
this is my blade template
<likepostcount
:post_id={{ $post->id }}
></likepostcount>
When I open the Vue Dev Tools, I see the post_id = 4
laravel vuejs2
asked Jan 3 at 16:08
pc soundpc sound
73
I'm making new Vue 2 component that shows likes count after like button hitted. And get the error:
app.js:5060 [Vue warn]: Error in mounted hook: "ReferenceError: post_id is not defined"
<template>
<span>
<i class="fa fa-heart"></i> {{ likescount }}
</span>
</template>
<script>
import { bus } from '../bootstrap';
import 'vuejs-noty/dist/vuejs-noty.css'
export default {
props: ["post_id"],
data: function() {
return {
likescount: 0,
}
},
created(){
bus.$on('postliked', (data) => {
this.updatelikescount(post_id);
});
},
mounted : function() {
post_id = {};
this.updatelikescount(post_id);
},
methods: {
updatelikescount(post_id) {
axios
.get('/blog/post/likecount/' + post_id)
.then(response => {
this.likescount = response.data.data[0][0]
})
.catch(response => console.log(response.data));
},
}
};
</script>
this is my blade template
<likepostcount
:post_id={{ $post->id }}
></likepostcount>
When I open the Vue Dev Tools, I see the post_id = 4
laravel vuejs2
laravel vuejs2
asked Jan 3 at 16:08
pc soundpc sound
73
asked Jan 3 at 16:08
pc soundpc sound
73
asked Jan 3 at 16:08
pc soundpc sound
73
asked Jan 3 at 16:08
pc soundpc sound
73
asked Jan 3 at 16:08
pc soundpc sound
73
73
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
It looks like you just need to add this.
mounted : function() {
this.post_id = {};
this.updatelikescount(this.post_id);
},
You code will always set the post_id to an empty object. You probably want to set a default value when you declare the props.
props: {
post_id: {
type: Object,
default: () => {}
}
},
mounted : function() {
this.updatelikescount(this.post_id);
},
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
|
show 3 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%2f54025924%2fvue-warn-error-in-mounted-hook-referenceerror-post-id-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
It looks like you just need to add this.
mounted : function() {
this.post_id = {};
this.updatelikescount(this.post_id);
},
You code will always set the post_id to an empty object. You probably want to set a default value when you declare the props.
props: {
post_id: {
type: Object,
default: () => {}
}
},
mounted : function() {
this.updatelikescount(this.post_id);
},
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
|
show 3 more comments
1
It looks like you just need to add this.
mounted : function() {
this.post_id = {};
this.updatelikescount(this.post_id);
},
You code will always set the post_id to an empty object. You probably want to set a default value when you declare the props.
props: {
post_id: {
type: Object,
default: () => {}
}
},
mounted : function() {
this.updatelikescount(this.post_id);
},
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
|
show 3 more comments
1
1
1
It looks like you just need to add this.
mounted : function() {
this.post_id = {};
this.updatelikescount(this.post_id);
},
You code will always set the post_id to an empty object. You probably want to set a default value when you declare the props.
props: {
post_id: {
type: Object,
default: () => {}
}
},
mounted : function() {
this.updatelikescount(this.post_id);
},
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
It looks like you just need to add this.
mounted : function() {
this.post_id = {};
this.updatelikescount(this.post_id);
},
You code will always set the post_id to an empty object. You probably want to set a default value when you declare the props.
props: {
post_id: {
type: Object,
default: () => {}
}
},
mounted : function() {
this.updatelikescount(this.post_id);
},
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
edited Jan 3 at 16:21
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
answered Jan 3 at 16:15
whoacowboywhoacowboy
4,23242455
4,23242455
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
|
show 3 more comments
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
dont works, I wrote export default { //props: ["post_id"], post_id: { type: Object, default: () => {} }, data: function() { return { likescount: 0, } }, your code, the "prop dissapears completely when I open VueDevTools
– pc sound
Jan 3 at 16:25
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
this is Laravel man! Your code dont works!
– pc sound
Jan 3 at 16:26
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
@pcsound The code you have written is Vue.js, not laravel. Good luck.
– whoacowboy
Jan 3 at 16:27
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
Your code syntax like this "props: { post_id: { type: Object, default: () => {} }" dont works! Even "post_id" dissapears after your syntax code.
– pc sound
Jan 3 at 16:41
1
1
ok, done, thanks
– pc sound
Jan 3 at 19:21
ok, done, thanks
– pc sound
Jan 3 at 19:21
|
show 3 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.
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%2f54025924%2fvue-warn-error-in-mounted-hook-referenceerror-post-id-is-not-defined%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
