Question

我试图将v-for中特定注释的变量（id）传递给呈现为刀片语法的按钮。我设法发布并获取评论，但是我目前正在尝试根据其ID删除特定的评论。我一直在努力使它正常工作，但我一直遇到这个错误

“ vue.js：634 [Vue警告]：v-on处理程序中的错误：” TypeError：无法读取未定义的属性“ id””

和

“ TypeError：无法读取未定义的属性'id'”

有人知道如何解决此问题吗？

这是我的html

<div class="media" style="margin-top:20px;" v-for="comment in comments">
                     <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="http://placeimg.com/80/80" alt="...">
                       </a>
                    </div>
                     <div class="media-body">



                     <h4 class="media-heading">@{{comment.user.name}} said...</h4>
                         <p>
                            @{{comment.text}}
                         </p>
                          <span style="color: #aaa;">on @{{comment.created_at}}</span>

                         <p>
                         @{{comment.id}}
                         </p>
                           <button class="btn btn-default" v-on:click="deleteComment('@{{comment.id}}')">Delete comment</button>

这是我的Vue脚本，我试图在其中传递评论ID

const app = new Vue({
el:'#root',
data: {
    comments: {},
    commentBox: '',
    post: {!! $post->toJson() !!},
    user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
},

mounted() {
    this.getComments();
},

methods: {
    getComments(){
        axios.get('/api/posts/'+this.post.id+'/comments')
             .then((response) => {
                 this.comments = response.data
             })
             .catch(function (error) {
                 console.log(error);
             });
    },
    postComment(){
        axios.post('/api/posts/'+this.post.id+'/comment', {
            api_token: this.user.api_token,
            text: this.commentBox
        })
        .then((response) => {
            this.comments.unshift(response.data);
            this.commentBox = '';
        })
        .catch(function (error) {
            console.log(error);
        });

    },

  deleteComment(id){
      axios.delete('api/posts/'+this.post.id+'/comment'+this.comment.id) 
            .then((response) => {
                this.commentBox = '';
                return 'delete successfull';
            })
            .catch(function (error) {
            console.log(error);
            });
  },





enter code here

Answer 1

在您的deleteComment方法中，您将id指定为this.comment.id，但没有在数据对象中绑定comment，这就是为什么您收到TypeError的原因。

此外，您要将id作为参数传递给deleteComment方法，因此请替换：

this.comment.id与id应该可以解决问题。

将变量传递给按钮Vue JS Laravel

1 个答案: