Как ограничить добавление полей в форме VUE.js?

Question

[KingForADay]

Есть калькулятор в котором 3 поля ввода значений

var app = new Vue({
	el: '#calculator',
	data: {
		items: [{sum: '', period: '', rate: ''}],
		payment: 0,
		savingsMonth: 0,
		savingsPeriod: 0
	},
	watch: {
		'items': {
			handler: function handler() {
				var totalSum = 0;
				var longestPeriod = 0;
				var sum;
				var period;
				var rate;
				var eachPayment;
				var eachOverpayment;
				var totalPayment = 0;
				var totalOverpayment = 0;
				var newRate = 8;
				var newOverpayment;

				for(var i = 0; i < this.items.length; i++) {
					if(!this.items[i].sum || !this.items[i].rate || !this.items[i].period)
						continue;

					totalSum += this.items[i].sum;

					if(this.items[i].period > longestPeriod)
						longestPeriod = this.items[i].period;

					sum = this.items[i].sum;
					rate = this.items[i].rate;
					period = this.items[i].period;
					eachPayment = (sum*(rate/1200)) / (1 - Math.pow((1+(rate/1200)), -period));
					eachPayment = Math.round(eachPayment * 100) / 100;

					eachOverpayment = (sum - eachPayment * period) * -1;
					eachOverpayment = Math.round(eachOverpayment * 100) / 100;

					totalPayment += eachPayment;

					totalOverpayment += eachOverpayment;
				}


				this.payment = (totalSum*(newRate/1200)) / (1 - Math.pow((1+(newRate/1200)), -longestPeriod));
				this.payment = Math.round(this.payment * 100) / 100;

				
				newOverpayment = (totalSum - this.payment * longestPeriod) * -1;
				newOverpayment = Math.round(newOverpayment * 100) / 100;

				
				this.savingsMonth = totalPayment - this.payment;
				this.savingsMonth = Math.round(this.savingsMonth * 100) / 100;

				
				this.savingsPeriod = totalOverpayment - newOverpayment;
				this.savingsPeriod = Math.round(this.savingsPeriod * 100) / 100;

				if(!this.payment)
					this.payment = 0;
				if(!this.savingsMonth)
					this.savingsMonth = 0;
				if(!this.savingsPeriod)
					this.savingsPeriod = 0;
			},
			deep: true
		}
	},
	methods: {
		add: function () {
			this.items.push({sum:'', period:'', rate:''});
		}
	}
});

И есть кнопка, которая добавляет по 3 поля на каждый клик.

<button class="button" type="button" @click="add()">+ Добавить</button>

Возник вопрос: как в этих условиях ограничить добавление полей? Максимально 3.
Простите, возможно дилетантский вопрос, но уже в голове путаница. Никак не могу придумать как это реализовать

Answer 1

[Александр Дроздов]

Скопипастил чтоле где-то?)
В методе add проверяй текущее кол-во и не вызывай push если 3

Comments

[KingForADay]

Поясни по поводу проверки в add?

[Александр Дроздов]

//в случае достижения 3х эл-тов ничего не делаем
if (this.items.length === 3) {
return;
}
this.items.push({sum:'', period:'', rate:''});