[Vuejs]-Adding component on add button

by

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.

👤xon52

Leave a comment