Создайте динамическую c форму и отправьте, используя Vue + PHP

Question

У меня есть форма, которая создается внутри v-for , и мне нужно отправить форму, созданную, как показано ниже, но ничего не работает. Я использовал Ajax и Топор ios все отлично работает, если форма находится за пределами v-for l oop. Может кто-нибудь предложить способ go об этом. Код ниже:

<div id="classPosts">
<div class="panel panel-default" v-for="single_post in class_posts">
                    <div class="panel-body">
                        <div id="responseDiv">
                            <div class="collapse" :id="`comment_div_${single_post.id}`">
                                <p></p>
                                <br>
                                <form action="#" method="post">
                                    <div class="row" id="comment_div" style="padding-left:20px;padding-right:20px;">
                                        <input type="hidden" name="post_id" id="post_id" :value="`${single_post.id}`">
                                        <input type="hidden" name="user_id" id="user_id" :value="`${single_post.userid}`">
                                        <div class="col-sm-10">
                                            <textarea name="post_comment" id="post_comment" rows="2" style="margin-left: 0px;resize: none;" class="form-control" placeholder="Reply" required v-model="post_comment"></textarea>
                                        </div>
                                        <div class="col-sm-2">
                                            <button class="btn btn-primary pull-right" id="submitComment" name="submitComment" @click="createComment()">Comment Post</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

Выше, где форма создается динамически: -: И ниже экземпляр Vue. Когда я нажимаю кнопку «Опубликовать комментарий», ничего не происходит, и даже появляется предупреждение («Была вызвана функция Создать комментарий») ; не отображается.

<script type="text/javascript">
new Vue({
    el: '#classPosts',
    data: {
        post_comment: '',
        class_posts: []
    },
    methods: {
        loadData: function() {
            ...
    },
    createComment: function() {
        alert("The Create comment function has been summoned.");
    },
    mounted: function() {
        this.loadData();
        setInterval(function() {
            this.loadData();
        }.bind(this), 60000);
    }
});

Ниже представлен файл console.log для class_posts. Возвращаемое значение.

Answer 1

Вот ваша проблема. Вы используете этот код:

methods: {
    loadData: function() {
        ...
},
createComment: function() {
    alert("The Create comment function has been summoned.");
},

Но ваш метод createComment должен быть внутри вашего свойства methods, например:

methods: {
    loadData: function() {
        ...
    },
    createComment: function() {
        alert("The Create comment function has been summoned.");
    },
},

Upd.

Отвечая на ваш вопрос из комментария. Сначала измените свой код на это:

<input type="hidden" name="post_id" id="post_id" :value="single_post.id">
<input type="hidden" name="user_id" id="user_id" :value="single_post.userid">

проверьте его и дайте мне знать.

Answer 2

предотвращает перезагрузку страницы при нажатии этой кнопки. Ваша кнопка отправки комментария должна быть.

<button class="btn btn-primary pull-right" id="submitComment" name="submitComment" @click.prevent="createComment()">Comment Post</button>