vue組件外部的訪問方法

Question

我是vuejs的新手。 我創建了與此處相似的評論功能，但由於某些情況，我不得不即興創作。 我使用vue組件，但無法訪問vue內的方法。 如果用戶已經發表評論，則任何用戶都可以回復該特定評論。 但是，我收到vue警告“屬性或方法'replyComment'未在實例上定義，但在渲染期間被引用”。 有人可以幫我嗎？

 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在第二個Vue實例（ #kalas ）中定義，但在第一個實例的模板（ #replykomen ）中引用。 將方法移動/復制到第一個Vue實例的方法以解決錯誤。