VueJs add more

How to create field add more using VueJs. VueJs is the JAVASCRIPT fast and easy to use the framework. Let’s see how we can create field add more using VueJs step by step.

Let’s first create HTML for our field.

    
    <style type="text/css">
        .fieldAvailabilityContainer .fieldAvailability .form-group{
            width: 250px;
            display: inline-block;
        }
    </style>

    <div class="container fieldAvailabilityContainer">
        <div class="row">
            <div class="col-md-12">
                <section class="content-header clearfix">
                    <h1 class="pull-left">VueJs Add More</h1>
                </section>
                <div class="fieldAvailability">
                    <div id="addAvailability">
                        <div class="dateAvailability" v-for="(field, index) in fields">
                            <div class="form-group">
                                <input type="text" v-model='field.field' class="form-control field" placeholder="Text">
                            </div>
                            <a href="#" v-if="index == 0" class="btn btn-success" v-on:click="addNewField">
                                <i class="fa fa-plus"></i>
                            </a>
                            <a href="#" v-if="index > 0" class="btn btn-danger" v-on:click="removeThisField(index)">
                                <i class="fa fa-minus"></i>
                            </a>
                        </div>
                        <input type="submit" name="submit" class="btn btn-success" value="submit" v-on:click="submitForm">
                    </div>
                </div>
            </div>      
        </div>
    </div>

Now we can write the code of VueJs for add more field.

    <script type="text/javascript">

        var addAvailability = new Vue({
            el: '#addAvailability',
            data: {
                fields : [{
                    field : '',
                }],
            },
            methods: {
                addNewField: function () {
                    this.fields.push({
                        field: '',
                    });
                },
                removeThisField : function(index){
                    this.fields.splice(index, 1);
                },
                submitForm : function(){
                    console.log( this.fields );
                    return false;
                },
            }
        });

    </script>

So Let’s see it’s too easy to create add more field using VueJs. you can easily manage to add more fields to write some lines of code using VueJs like as above.

If you face any issue after using this code write the comment below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s