Создание динамической формы и отправка с помощью Vue + PHP

Создание динамической формы и отправка с помощью Vue + PHP

27.01.2020 01:06:16 Просмотров 10 Источник

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

<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. Когда я нажимаю на кнопку Comment Post, ничего не происходит, и даже предупреждение ("функция Create comment была вызвана.") ; не показывает.

<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);
    }
});

Ниже находится консоль.журнал для class_posts. Значение.

enter image description here

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php#comment105997836_59928888
Проверьте мой ответ, пожалуйста. Скорее всего, решение есть.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php#comment105997923_59928888
Кроме того, проверьте консоль браузера. Он должен содержать некоторую полезную информацию об ошибке.

Ответы - Создание динамической формы и отправка с помощью Vue + PHP / Create dynamic form and submit using Vue + PHP

Qonvex620

27.01.2020 01:23:33

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

<button class="btn btn-primary pull-right" id="submitComment" name="submitComment" @click.prevent="createComment()">Comment Post</button>
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59929180#comment105984372_59929180
Я сделал это, но все еще не работает, но спасибо за предложение
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59929180#comment105986923_59929180
Неужели ? Это невозможно.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59929180#comment106020101_59929180
Вы были rught @ Qonvex620, просто я пропустил еще одну фигурную скобку, чтобы вложить свою функцию в методы.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59929180#comment106020151_59929180
Если мой ответ помог вам, пожалуйста, отметьте его как принятый ответ
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59929180#comment106020156_59929180
Если мой ответ помог вам, пожалуйста, отметьте его как принятый ответ
Является ответом!
webprogrammer

27.01.2020 10:53:40

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

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

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

Upd.

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

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

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

https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106019259_59937987
Спасибо, теперь это работает. Не знаю, как я пропустил эту часть.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106019323_59937987
@HueyMataruse, добро пожаловать!
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106019483_59937987
Однако я мог бы снова воспользоваться вашей помощью, я вижу, что следующие строки получают только первые идентификаторы первом ряду в петлю и не меняется для всех остальных элементов, что V-цикл for: <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}`">
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106021282_59937987
@HueyMataruse, я обновил свой ответ. Вы можете это проверить?
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106021351_59937987
@HueyMataruse, также, вы можете показать мне console.log(class_posts)- это было бы полезно.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106023084_59937987
я отправил журнал консоли,
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106028535_59937987
@HueyMataruse, вы изменили код, как в моем примере в обновлениях к ответу?
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106028823_59937987
@HueyMataruse, кроме того, вы не можете использовать v-model="post_comment"на textareabacause вы пытаетесь привязать к одному и тому же post_commentразные текстовые области.
https://stackoverflow.com/questions/59928888/create-dynamic-form-and-submit-using-vue-php/59937987#comment106031010_59937987
да, я изменил код, как вы упомянули ранее, и это то, что я получил, я по-прежнему получаю идентификаторы только от первого объекта, т. е. 6 и 71, но те из второго объекта 5 и 71, даже если v-for реализован. Да привязка post_comment у меня тоже были проблемы с этим, как я могу это решить, могу ли я использовать refs
Закрыть X