Восстановить идентификатор элемента в цикле v-for

Question

Я пытаюсь создать ответ на комментарий. Вот что я пытаюсь сделать:

Я беру идентификатор комментария из v-for l oop и помещаю его в промежуток, который невидим. Затем я хочу восстановить значение id в переменной 'pm' В вызове функции have (), а затем отправить его на мой контроллер для вставки данных в БД. Но ничего не происходит, и это показывает ошибку, что он может восстановить идентификатор.

это мой 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 >    &nbsp; &nbsp; {{ comment.body }}
        &nbsp;&nbsp;&nbsp; <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>

это мой контроллер функций:

  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);


}

и это мой маршрут:

Route::post('/commentsreponse/{key}', 'API\CommentController@storereply');

Answer 1

Вы должны убедиться, что comment.id действительно может достичь функции have. Просто передайте его в качестве аргумента ajouterCommentaireReponse:

<form  @submit.prevent="ajouterCommentaireReponse(comment.id)"  v-bind:id="comment.id " class="d-none">

Тогда вам вообще не нужна функция help:

module.exports = {
    methods:{
        ajouterCommentaireReponse(commentId){
            axios.post('/api/commentsreponse/'+ commentId)
            .then(()=>{
               // do things
            })
        },
    },
}
</script>