Как мне складывать сумму массива Vue JS?

Question

[Эмиль Рахматуллин]

Только начал изучение VueJS. Сейчас заполняю массив, но почему-то не работает подсчёт.

HTML:

<input type="checkbox" id="reviewsOne" name="reviews"
	v-bind:value="400"
	v-model:number="dataFields">

<input type="checkbox" id="servicesTwo" name="services"
	v-bind:value="670"
	v-model:number="dataFields">

<span id="total_price">{{ totalPrice }}</span>

JS:

var app = new Vue({
	el: '#calculate',
	data: {
		totalPrice: 0,
		dataFields: [],
	},
	watch: {
		dataFields: function() {

			for(vari = 0; i > this.dataFields.length; i++) {
				this.totalPrice += this.dataFields[i];
			}

			return this.dataFields;
		},
	}
});

Comments

[alex]

for(vari = 0;
это шо?

[Эмиль Рахматуллин]

Alex, не в этом дело. Когда вопрос писал, случайно опечатался

Answer 1

[alex]

var app = new Vue({
  el: '#calculate',
  data: {
    dataFields: []
  },
  computed: {
    totalPrice () {
      return this.dataFields.reduce((acc, n) => {
         return acc += n
      }, 0)
    }
  }
});

Comments

[Эмиль Рахматуллин]

Как передать значения totalPrice() в html?

[alex]

Эмиль Рахматуллин, <span id="total_price">{{ totalPrice }}</span>

[Эмиль Рахматуллин]

Alex, ааа, я у себя не удалил totalPrice в data, поэтому не работало. Спасибо большое!