How to multiply values of the dynamically created input fields in laravel+vueJs component?

Question

I'm new to vueJS+laravel and Here is the VueJs Component under laravel5.8 Currently, it has two buttons on selection they create dynamic input fields, I'm trying to get the multiplication of values dynamically entered by user as a total =?. please help - thanks

<template>
     <div><form type="get" action="/asd">
        <div>
          <label>Add A</label>
             <button type="button"  @click="addRow">100</button>
        </div>
     <div> <label>Add B</label>
         <button type="button"  @click="addRow1">200</button>
     </div>

       <div v-for="row in rows" :key="row.id">
         <button-counter :name ="row.name" :id="row.id" :value="row.value"></button-counter>
      </div>
         <div>
            <li>total = ?</li>
         </div>
      <button>submit</button>
        </form>
         </div>
</template>


<script type="text/javascript">
Vue.component("button-counter", {
    props: {
        value: {
            default: ""
        }
    },
    template: '<input name=row.name type="text" style="margin-top: 10px;" v-model="value" >'
});

export default {
    data() {
        return {
            rows: [],
            count: 0
        };
    },
    methods: {
        addRow: function() {
            var txtCount = 1;
            let id = "txt_" + txtCount;

            this.rows.push({ name:'A',value:100, description: "textbox1", id });
        },
        addRow1: function() {
            var txtCount = 1;
            let id = "txt2_" + txtCount;
            this.rows.push({name:'B',value:200, description: "textbox2", id });
        }
    }
};

Konrad Słotwiński · Accepted Answer · 2019-10-21 13:25:14Z

1

<template>
    <div><form type="get" action="/asd">
        <div>
            <label>Add A</label>
            <button type="button"  @click="addRow">100</button>
        </div>
        <div> <label>Add B</label>
            <button type="button"  @click="addRow1">200</button>
        </div>

        <div v-for="row in rows" :key="row.id">
            <button-counter :name ="row.name" :id="row.id" :value.sync="row.value"></button-counter>
        </div>
        <div>
            <li>total = {{ total }}</li>
        </div>
        <button>submit</button>
    </form>
    </div>
</template>


<script type="text/javascript">
    Vue.component("button-counter", {
        props: {
            value: {
                default: ""
            }
        },
        template: '<input name=row.name type="text" style="margin-top: 10px;" :value="value" @change="$emit(\'update:value\', $event.target.value)">'
    });

    export default {
        data() {
            return {
                rows: [],
                count: 0
            };
        },
        computed: {
            total() {
                if (this.rows.length) {
                    return this.rows.reduce((acc, row) => acc*row.value, 1);
                }

                return 0;
            }
        },
        methods: {
            addRow: function() {
                var txtCount = 1;
                let id = "txt_" + txtCount;

                this.rows.push({ name:'A',value:100, description: "textbox1", id });
            },
            addRow1: function() {
                var txtCount = 1;
                let id = "txt2_" + txtCount;
                this.rows.push({name:'B',value:200, description: "textbox2", id });
            }
        }
    };

ADDITION

total(){
    return this.rows.reduce((acc, row) => acc += parseInt(row.value), 0);
}

edited Oct 21, 2019 at 13:25

answered Oct 21, 2019 at 12:14

Konrad Słotwiński

6994 silver badges10 bronze badges

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

4 Comments

Vinod Bisen Over a year ago

Thanks a ton, now I'm using for addition so changed acc*row.value to acc+row.value but it's not giving the addition of these fields, ex. if I ener 100 and 200 I get 301 and if I edit 100 to 10 I get this 10 added after 301+10 ...what else needs to be changed?

Konrad Słotwiński Over a year ago

@VinodBisen I added example of total with addition

Vinod Bisen Over a year ago

Above code of yours is working for the first time but if I edit any of the boxes with different value if appends instead of SUM, please help with this last issue .

Konrad Słotwiński Over a year ago

@VinodBisen it's seems like row values are treated as strings you need to use parseInt function on them

Collectives™ on Stack Overflow

How to multiply values of the dynamically created input fields in laravel+vueJs component?

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