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.