Question

我是vuejs的新手。我创建了与here类似的评论功能，但由于某些情况，我不得不即兴创作。我使用vue组件，但无法访问vue内的方法。如果用户已经发表评论，则任何用户都可以回复该特定评论。但是，我收到vue警告“属性或方法'replyComment'未在实例上定义，但在渲染期间被引用”。有人可以帮我吗？

Vue.component('reply-komen',{
        template:'#replykomen',
        props:{
            edit:{
                type:Boolean,
                default:false
            },
            comment:{
                type:Object,
                default(){
                    return {
                        title: '',
                        body: '',
                        id: ''
                    }
                }
            }
        },
        methods:{
            replyComment: function(comment_id){
                console.log(comment.id);
                var id={{$complaint->id}};
                var users={{Illuminate\Support\Facades\Auth::user()->id}};
                const item=this.$refs.balaskomen;
                const idkomen=item.dataset.id;
                console.log(idkomen);
                $.ajax({
                    url:'/api/complaint/comment',
                    type:"POST",
                    data:{
                        'users':users,
                        'id':id,
                        'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            }
        }
    });

    var komen2=new Vue({
        el: '#kalas',
        data:{
            currentView:'',
            edit:false,
            comments:[],
            comment: {
                title:'',
                body: '',
                id: '',
            }
        },

        created: function(){
            this.fetchComments();
            this.createComment();
            this.editComment();
            this.deleteComment();
            this.showComment();
        },

        methods: {
            fetchComments: function(){
                var id={{$complaint->id}};
                $.ajax({
                    url:'/api/complaint/getcomments',
                    type:"GET",
                    data:{
                      'id':id
                    },
                    success:function (response) {
                        komen2.comments = response;
                    }
                })
            },

            createComment: function(){
                var id={{$complaint->id}};
                var users={{Illuminate\Support\Facades\Auth::user()->id}};
                $.ajax({
                    url:'/api/complaint/comment',
                    type:"POST",
                    data:{
                        'users':users,
                        'id':id,
                      'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            },

            editComment: function(comment_id){
                $.ajax({
                    url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
                    type:"PATCH",
                    data:{
                        'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.comment.id= '';
                        komen2.fetchComments();
                        komen2.edit = false;
                    }
                })
            },

            deleteComment: function(comment_id){
                $.ajax({
                    url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
                    type:"DELETE",
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            },

            showComment: function(comment_id){
                for (var i = 0; i < this.comments.length; i++) {
                    if (this.comments[i].id == comment_id) {
                        this.comment.body = this.comments[i].body;
                        this.comment.id = this.comments[i].id;
                        this.edit = true;
                    }
                }
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
    <div class="container">
        <h4>Add Comment</h4>
        <form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
            <div class="input-group">
                <textarea name="body" v-model="comment.body" ref="textarea"  class="form-control"></textarea>
            </div>
            <div class="input-group">
                <button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
                <button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
            </div>
        </form>
        <br>
        <h4>Comments</h4>
        <ul class="list-group" v-for="comment in comments">
            {{--<li class="list-group-item" v-for="comment in comments">--}}
                <form>
                    <div class="input-group">
                        <textarea class="form-control">@{{comment.body}}</textarea>
                    </div>
                    <div class="input-group" ref="balaskomen" v-bind:id="comment.id">
                        <a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
                        <a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
                    </div>
                </form>
            {{--</li>--}}
        </ul>
        <div class="container balas" >
            <component :is="currentView"></component>
        </div>
    </div>
</div>
<template id="replykomen" >
    <form action="" @submit.prevent="replyComment(comment.id)">
        <div class="input-group">
            <textarea name="body" v-model="comment.body" ref="textarea"  class="form-control"></textarea>
        </div>
        <div class="input-group">
            <button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
        </div>
    </form>
</template>

Answer 1

replyComment在第二个Vue实例（#kalas）中定义，但在第一个实例的模板（#replykomen）中引用。将方法移动/复制到第一个Vue实例的方法以解决错误。

vue组件外部的访问方法

1 个答案: