access method outside vue component

Question

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={{Illuminate\\Support\\Facades\\Auth::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={{Illuminate\\Support\\Facades\\Auth::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> 

Answer 1

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.