Create dynamic form and submit using Vue + PHP

Question

I have a form that is being created inside a v-for and I need to submit a form being created like below but nothing is working. I have used Ajax and Axios all work fine if the form is outside the v-for loop. Can anyone propose a way to go about it. Code below:

<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>

The above is where the form is being dynamically created: - : And below is the Vue instance. When I click on Comment Post button, nothing happens and even the alert("The Create comment function has been summoned."); does not show.

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

Below is the console.log for class_posts. Return value.

Check my answer, please. Most probably, there is a solution. — webprogrammer
– webprogrammer, Commented Jan 27, 2020 at 20:08
Also, check you browser console. It should contain some useful information about an error. — webprogrammer
– webprogrammer, Commented Jan 27, 2020 at 20:12

webprogrammer · Accepted Answer · 2020-01-28 14:18:51Z

1

Here is your problem. You are using this code:

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

But your method createComment should be inside your methods property like this:

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

Upd.

Answering to your question from the comment. At first change your code to this:

<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">

check it and let me know.

edited Jan 28, 2020 at 14:18

answered Jan 27, 2020 at 19:53

webprogrammer

2,4733 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Tadiwanashe Over a year ago

Thank you, it's working now. I don't know how i missed that part.

Tadiwanashe Over a year ago

I however could use your help again, i am seeing that the following lines are only getting the first IDs of the first row in the loop and not changing for all the other items in that v-for loop:

<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}`">

webprogrammer Over a year ago

@HueyMataruse, I have updated my answer. Can you check it?

webprogrammer Over a year ago

@HueyMataruse, also, you can show me console.log(class_posts) - it would be helpful.

webprogrammer Over a year ago

@HueyMataruse, also, you can't use v-model="post_comment" on textarea bacause you are trying to bind to the same post_comment different textareas.

|

Qonvex620 · Accepted Answer · 2020-01-27 10:23:33Z

1

prevent the page to reload when you are clicking that button. Your comment post button must be .

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

answered Jan 27, 2020 at 10:23

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

3 Comments

Tadiwanashe Over a year ago

I have done that but still not working but thanks for the suggestion

Qonvex620 Over a year ago

Really ? It's impossible

Tadiwanashe Over a year ago

You were rught @ Qonvex620, it's just that I had missed another curly brace to nest my function inside methods.

Collectives™ on Stack Overflow

Create dynamic form and submit using Vue + PHP

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related