Laravel 恢复v-for循环中的项目id

我试图建立对评论的回应。以下是我试图做的：

我从

v-for

循环中获取注释ID，并将其放在一个不可见的范围内。然后，我想恢复函数调用have（）中'pm'变量中id的值，然后将其发送给我的控制器以在DB中插入数据。但是什么也没发生，这表明他可以恢复id

这是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 >    &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>

这是我的路线：

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

---

您需要确保

comment.id

可以实际访问

have

功能。只需将其作为参数传递给

aOuterCommentAirResponse

：

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

---

您需要确保

comment.id

可以实际访问

have

功能。只需将其作为参数传递给

aOuterCommentAirResponse

：

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

---

有两件事：您将

v-for

循环中的每个跨度设置为使用相同的id，这是不好的。一旦你有了不止一个，就很难/不可能推理了。其次，您没有将id传递给have函数。为了利用它，您需要这样做。有两件事：您在

v-for

循环中设置每个跨度以使用相同的id，这是不好的。一旦你有了不止一个，就很难/不可能推理了。其次，您没有将id传递给have函数。你需要这样做才能利用它。

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