将变量传递给按钮 vue js laravel

Question

我正在尝试将 v-for 中特定评论的变量 (id) 传递给呈现为 blade 语法的按钮。我设法 post 并获得了评论，但我目前正在尝试根据他们的 ID 删除特定的评论。我一直在努力研究如何让它工作，但我一直收到这个错误

"vue.js:634 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of undefined"

和

"TypeError: Cannot read property 'id' of undefined"

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

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

Pass variable to button vue js laravel

laravel

vue.js

post

axios

comments