I am a newcomer to Vue.js and have implemented a comment feature similar to the one described here. However, due to certain constraints, I had to make adjustments. I used a Vue component but encountered an issue where it couldn't access a method inside my Vue instance. The requirement is that any user can reply to a particular comment if another user has already posted a comment. I am receiving a Vue warning stating "Property or method 'replyComment' is not defined on the instance but referenced during render". Can anyone offer assistance with this problem, 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>