在 v-for 循环中恢复项目 ID

Question

我正在尝试建立对评论的响应。这是我想要做的：

我从 v-for 循环中获取评论 ID，并将其放入不可见的 span 中。然后我想在函数调用 have() 中恢复 'pm' 变量中的 id 值，然后将其发送到我的控制器以在 DB 中插入数据。但是什么也没发生，它显示一个错误，他可以恢复 id。

这是我的 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>