mhz-tamb/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js test project</title>

    <style>
        input[type="number"] {
            width: 4rem;
            height: 1rem;
            margin: 0 .5rem;
        }

        button {
            padding: .2rem .8rem;
            margin-left: .5rem;
        }

        .d-inline-block {
            display: inline-block;
        }

        .numbers > div:not(:last-child) span::after {
            content: '+';
        }

        .numbers > div:last-child span::after {
            content: '=';
        }
    </style>
</head>
<body>
    <div id="application">
        <number-counter></number-counter>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

## scripts.js
'use strict';

Vue.component('number-counter', {
    data: () => {
        return {
            result: 0,
            numbers: new Array(2)
        };
    },

    methods: {
        add: function(event) {
            event.preventDefault();
            this.numbers.push(0);
        },
        update: function(event) {
            this.result = this.numbers.reduce((accumulator, current, index, array) => {
                current = parseInt(current);
                return accumulator + (!isNaN(current) ? current : 0);
            });
        }
    },

    template: `
        <div>
            <div class="d-inline-block numbers">
                <div class="d-inline-block" v-for="(number, index) in numbers">
                    <input v-model.number="numbers[index]" v-on:change="update" type="number"><span></span>
                </div>
            </div>

            <p class="d-inline-block result">{{ result }}</p>

            <div>
                <button v-on:click="add">Add number</button>
            </div>
        </div>
    `
})

let app = new Vue({el: '#application'});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Vue.js test project</title>

	<style>
	input[type="number"] {
	width: 4rem;
	height: 1rem;
	margin: 0 .5rem;
	}

	button {
	padding: .2rem .8rem;
	margin-left: .5rem;
	}

	.d-inline-block {
	display: inline-block;
	}

	.numbers > div:not(:last-child) span::after {
	content: '+';
	}

	.numbers > div:last-child span::after {
	content: '=';
	}
	</style>
	</head>
	<body>
	<div id="application">
	<number-counter></number-counter>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="scripts.js"></script>
	</body>
	</html>
	'use strict';

	Vue.component('number-counter', {
	data: () => {
	return {
	result: 0,
	numbers: new Array(2)
	};
	},

	methods: {
	add: function(event) {
	event.preventDefault();
	this.numbers.push(0);
	},
	update: function(event) {
	this.result = this.numbers.reduce((accumulator, current, index, array) => {
	current = parseInt(current);
	return accumulator + (!isNaN(current) ? current : 0);
	});
	}
	},

	template: `
	<div>
	<div class="d-inline-block numbers">
	<div class="d-inline-block" v-for="(number, index) in numbers">
	<input v-model.number="numbers[index]" v-on:change="update" type="number"><span></span>
	</div>
	</div>

	<p class="d-inline-block result">{{ result }}</p>

	<div>
	<button v-on:click="add">Add number</button>
	</div>
	</div>
	`
	})

	let app = new Vue({el: '#application'});