Recover item id in v-for loop - laravel

Question

I am trying to build response to comment. Here is what I am trying to do:
I take the comment ID from the v-for loop and put it in a span that is invisible. Then I want to recover the value of id in 'pm' variable In function call have(), then send it to my controller to insert data in DB. But nothing happens and it shows an error that he can recover the id.
this my vue ProjectDeatil.vue:
<div class="form-group" style="display: inline;" >
<form #submit.prevent="ajouterCommentaire()">
<label>Votre Commentaire:</label>
<div class="input-group input-group-sm mb-0">
<input class="form-control form-control-sm" v-model="form.body" type="text" name="body"
:class="{ 'is-invalid': form.errors.has('body') }" placeholder="commenter.." style="width:450px;">
<has-error :form="form" field="body"></has-error>
<div class="input-group-append">
<button type="submit" class="btn btn-success " >Commenter</button>
</div>
</div>
</form>
</div>
<div v-for="comment in comments" :key="comment.id" class=" align-items mt-3">
<span id="pm" :value="comment.id" style="">{{ comment.id }}</span>
<hr>
<span class="badge badge-primary"> {{ comment.comment_user_name }}</span > {{ comment.body }}
<b> <small class="badge badge-success" style="float:right; color:#2d132c " >Posté le {{ comment.created_at || date }} </small></b>
<br>
<button #click="showbtn(comment.id)" class="btn btn-default" >Répondre</button>
<form #submit.prevent="ajouterCommentaireReponse()" v-bind:id="comment.id " class="d-none">
<div class="input-group input-group-sm mb-0">
<input class="form-control form-control-sm " type="text" name="body"
placeholder="commenter.." style="width:450px;">
<div class="input-group-append">
<button type="submit" class="btn btn-success " >Commenter</button>
</div>
</div>
</form>
<hr>
</div>
</div>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
</div>
</div>
<!-- /.row -->
<!-- /.row -->
</div>
<!-- /.card-body -->
</div>
</div>
</template>
<script>
export default {
data(){
return{
key: this.$route.params.id,
projets:[],
projet:{
id:'',
name:'',
durre:'',
description:'',
budget:'',
owner:'',
},
membres:[], membre:{
id :'',
membre:'',
projet_id:'',
},
form : new Form({
id:'',
body:'',
user:'',
}),
comments:[],
comment:{
id:'',
body:'',
created_at:''
}
}
},
methods:{
afficherProjets(){
axios.get('/api/getProjects')
.then(({data}) => {this.projets=data.data});
},
afficherMembre(){
axios.get('/api/membreid').then(({data})=> {this.membres =data.data});
},
ajouterCommentaire(){
this.form.post('/api/comments/'+this.key).then(()=>{
this.form.reset()})
},
ajouterCommentaireReponse(){
axios.post('/api/commentsreponse/'+ this.have()).then(()=>{
})
},
afficherComments(){
axios.get('/api/comments').then(({data})=> {this.comments =data.data});
},
showbtn(id){
let element= document.getElementById(id);
element.classList.toggle('d-none');
},
have(){
var key = document.getElementById('pm').value;
return key;
}
},
mounted() {
console.log('Component mounted.')
this.afficherProjets();
this.afficherMembre();
this.afficherComments();
}
}
</script>
this is my function controller:
public function storereply($key){
//$data =$request->all();
$commentaire=Commentaire::find($key);
$commentairereply =new Commentaire;
$commentairereply->user_id= auth()->user()->id;
$commentairereply->body= request('body');
$commentairereply->comment_user_name=$commentaire->user->name;
$commentaire->comments()->save($commentairereply);
}
and this is my route:
Route::post('/commentsreponse/{key}', 'API\CommentController#storereply');

Answer 1

You need to make sure comment.id can actually reach the have function. Simply pass it as an argument to ajouterCommentaireReponse:
<form #submit.prevent="ajouterCommentaireReponse(comment.id)" v-bind:id="comment.id " class="d-none">
Then, you shouldn't need the help function at all:
module.exports = {
methods:{
ajouterCommentaireReponse(commentId){
axios.post('/api/commentsreponse/'+ commentId)
.then(()=>{
// do things
})
},
},
}
</script>