access method outside vue component
0
i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn't access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn "Property or method 'replyComment' is not defined on the instance but referenced during render". can anyone help me please?
Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>javascript vue.js vuejs2 vue-component
asked Dec 27 '18 at 7:34
Mace
308
add a comment |
0
i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn't access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn "Property or method 'replyComment' is not defined on the instance but referenced during render". can anyone help me please?
Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>javascript vue.js vuejs2 vue-component
asked Dec 27 '18 at 7:34
Mace
308
add a comment |
0
0
0
i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn't access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn "Property or method 'replyComment' is not defined on the instance but referenced during render". can anyone help me please?
Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>javascript vue.js vuejs2 vue-component
asked Dec 27 '18 at 7:34
Mace
308
i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn't access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn "Property or method 'replyComment' is not defined on the instance but referenced during render". can anyone help me please?
Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>Vue.component('reply-komen',{
template:'#replykomen',
props:{
edit:{
type:Boolean,
default:false
},
comment:{
type:Object,
default(){
return {
title: '',
body: '',
id: ''
}
}
}
},
methods:{
replyComment: function(comment_id){
console.log(comment.id);
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
const item=this.$refs.balaskomen;
const idkomen=item.dataset.id;
console.log(idkomen);
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
}
}
});
var komen2=new Vue({
el: '#kalas',
data:{
currentView:'',
edit:false,
comments:,
comment: {
title:'',
body: '',
id: '',
}
},
created: function(){
this.fetchComments();
this.createComment();
this.editComment();
this.deleteComment();
this.showComment();
},
methods: {
fetchComments: function(){
var id={{$complaint->id}};
$.ajax({
url:'/api/complaint/getcomments',
type:"GET",
data:{
'id':id
},
success:function (response) {
komen2.comments = response;
}
})
},
createComment: function(){
var id={{$complaint->id}};
var users={{IlluminateSupportFacadesAuth::user()->id}};
$.ajax({
url:'/api/complaint/comment',
type:"POST",
data:{
'users':users,
'id':id,
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
editComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"PATCH",
data:{
'comment':this.comment
},
success:function (response) {
komen2.comment.body= '';
komen2.comment.id= '';
komen2.fetchComments();
komen2.edit = false;
}
})
},
deleteComment: function(comment_id){
$.ajax({
url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
type:"DELETE",
success:function (response) {
komen2.comment.body= '';
komen2.fetchComments();
}
})
},
showComment: function(comment_id){
for (var i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.edit = true;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
<div class="container">
<h4>Add Comment</h4>
<form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
<button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
</div>
</form>
<br>
<h4>Comments</h4>
<ul class="list-group" v-for="comment in comments">
{{--<li class="list-group-item" v-for="comment in comments">--}}
<form>
<div class="input-group">
<textarea class="form-control">@{{comment.body}}</textarea>
</div>
<div class="input-group" ref="balaskomen" v-bind:id="comment.id">
<a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
<a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
</div>
</form>
{{--</li>--}}
</ul>
<div class="container balas" >
<component :is="currentView"></component>
</div>
</div>
</div>
<template id="replykomen" >
<form action="" @submit.prevent="replyComment(comment.id)">
<div class="input-group">
<textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
</div>
<div class="input-group">
<button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
</div>
</form>
</template>javascript vue.js vuejs2 vue-component
javascript vue.js vuejs2 vue-component
asked Dec 27 '18 at 7:34
Mace
308
asked Dec 27 '18 at 7:34
Mace
308
edited Dec 27 '18 at 22:14
asked Dec 27 '18 at 7:34
Mace
308
asked Dec 27 '18 at 7:34
Mace
308
asked Dec 27 '18 at 7:34
Mace
308
308
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance's template (#replykomen). Move/copy the method to the first Vue instance's methods to resolve the error.
answered Dec 27 '18 at 7:46
tony19
23.4k44175
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
|
show 1 more comment
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%2f53941406%2faccess-method-outside-vue-component%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
2
replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance's template (#replykomen). Move/copy the method to the first Vue instance's methods to resolve the error.
answered Dec 27 '18 at 7:46
tony19
23.4k44175
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
|
show 1 more comment
2
replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance's template (#replykomen). Move/copy the method to the first Vue instance's methods to resolve the error.
answered Dec 27 '18 at 7:46
tony19
23.4k44175
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
|
show 1 more comment
2
2
2
replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance's template (#replykomen). Move/copy the method to the first Vue instance's methods to resolve the error.
answered Dec 27 '18 at 7:46
tony19
23.4k44175
replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance's template (#replykomen). Move/copy the method to the first Vue instance's methods to resolve the error.
answered Dec 27 '18 at 7:46
tony19
23.4k44175
answered Dec 27 '18 at 7:46
tony19
23.4k44175
answered Dec 27 '18 at 7:46
tony19
23.4k44175
answered Dec 27 '18 at 7:46
tony19
23.4k44175
23.4k44175
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
|
show 1 more comment
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
thanks man you really great. i'd spend so much time just to figure this thing out.
– Mace
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
@Mace No problem :)
– tony19
Dec 27 '18 at 7:52
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
can i ask you one more question? perhaps via twitter handle or skype?
– Mace
Dec 27 '18 at 9:30
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
Sure. @tonytrinh but best to ask on stackoverflow so that others could answer as well, especially if I’m not available or don’t know the answer.
– tony19
Dec 27 '18 at 11:08
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
i've edited the code as per your suggestion. it runs perfectly. now i actually tried to get comment.id of the comments that the user decided to reply, but it seems it is not passed into the components. i'd edited the props but alas nothing changes also. help me tony :'(
– Mace
Dec 27 '18 at 22:21
|
show 1 more comment
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%2f53941406%2faccess-method-outside-vue-component%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
