adding component on add button

Question

i am a absolute beginner in vuejs,i have a feature of adding dynamic input fields on click of a button it will keep on adding rows and keeping in mind the counter should be incrementing also so that i can validate on backend, this is my code so far

<div id="settlement_container" class="container-fluid mt-4">
    <div class="card rounded-0 shadow-lg">

        <div class="card-body p-0">

            <div class="card-header px-2">
                <div class="row wow fadeIn">
                    <div class="col-5">
                        <h3>Add Store Status</h3>
                    </div>
                </div>
            </div>

            <form class="custom-form-group" action="{{url('stores/addStoreStatusDB')}}" method="POST">

                <div class="form-group col-6">
                    <label for="exampleInputEmail1">Tax</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="tax" placeholder="Tax" required>
                </div>

                <div class="display-inline">
                    <div class="form-group col-md-6">
                        <button @click="addstatus" class="btn btn-primary">Add Rows</button>
                    </div>
                </div>

                <div class="display-inline">
                    <div class="form-group col-md-6">
                        <button type="submit" class="btn btn-primary">Update Tax</button>
                    </div>
                </div>

                <dynamic-rows/>

            </form>
        </div>

    </div>

</div>
{{--  Main layout  --}}
@push('script')
<script src="{{ asset('js/app_vue.js') }}" ></script>
<script>

Vue.component('dynamic-rows',{
//accept data inside template
props:['counter'],
//accept data inside template

template:"<label for='exampleInputEmail1'>counter</label>"
});

    const app = new Vue({
        el: '#settlement_container',
        data: {
            counter:0
        },
        component:['dynamic-rows'],
        methods:{
            addstatus:function(e){
                appendDiv=""
                e.preventDefault();
                alert("inside");
            }
        }
    });
</script>

now i can do this in jquery in 5 minutes , but as i am beginner in vuejs i cant developer the sense of it of how to do it, i have a component and i want to repeat the component every time the button is clicked, here is the fiddle! fiddle

tony19 · Accepted Answer · 2022-07-15 22:05:28Z

3

OK, so a lot going on here and I think it may be easier to break down some of the points in isolation for you to play with and learn.

To add inputs, I think it makes more sense to have the values being in an array. Using Vue, you can iterate through that array to let each array element have its own <input/> while also simply adding another array element to add a new input:

<template>
    <div>
        <div v-for="(tax, index) in taxes" :key="index">
            <input v-model="taxes[index]" />
        </div>
        <button type="number" @click="add">Add</button>
        <p>Count: {{taxes.length}}</p>
    </div>
</template>

<script>
    export default {
        data(): {
            return {
                taxes: [0]
            }
        },
        methods: {
            add() {
                this.taxes.push(0);
            }
        }
    });
</script>

Now with regards to the counter, I don't know what you mean validate on the backend. You could add a watcher on the taxes array and process changes there? Watchers are used sparingly, with computed properties being much preferred, but they may make sense if you need to be sending data to the backend instead of into the DOM.

The counter prop you registered in your code is not really going to work for the pattern I showed. Generally, props are for parent components to pass data to child components. The preferred pattern when sending data from child to parent is to use $emit. Read more here.

edited Jul 15, 2022 at 22:05

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 1, 2019 at 13:20

xon52

7365 silver badges13 bronze badges

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

4 Comments

uneeb meer Over a year ago

wherever i place this template or component tag the html after that doesnt render, i can add it to the bottom of the page but i want my inputs to be displayed just above add more button, how can i do that?

xon52 Over a year ago

OK, I had a feeling you may ask that. So the code I have there is a component, which can be its own file which you can add into another component you have. So if it were named TaxAdder you'd import it in your parent component script import TaxAdder from '...' and then include it as a component: components: { TaxAdder } and finally add it into the parent template: <tax-adder></tax-adder>. Or, just read the code and edit your code to incorporate it.

uneeb meer Over a year ago

yes i had the idea, thankyou so much for your help @chisnall.io i will try it out in a couple of hours and let you know

uneeb meer Over a year ago

thanks @chisnall my solution was a little different from yours, but the idea was yours, thankyou for the help, keeo up the good work :)

Collectives™ on Stack Overflow

adding component on add button

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related