Vue.js: Рассчитать среднее значение и поле для обновления

Question

Я пытаюсь вычислить среднее значение вспомогательных оценок, которые не равны нулю, и установка привязанного ввода к этому новому среднему значению.

Подразделы имеют директиву v-on, которая вызывает функцию calcAverage(). В этом я бы подумал, что вы должны обновить соответствующее значение avgGrade.

HTML:

<div id="container"> 
    <div class="row" v-repeat="testData"> 
     <p>Grade avg: 
      <!--this should be average of sub grades that aren't 0--> 
      <input type="text" v-model="avgGrade" disabled /> 
      <div v-repeat="vals">Sub grade {{item}}: 
       <input type="text" v-model="grade" v-on="change:calcAverage" /> 
      </div> 
     </p> 
    </div> 
</div> 

JS:

var data = [ 
    {item: 1,avgGrade: 2,vals: [{grade: 2}, {grade: 2}, {grade: 2}]}, 
    {item: 2,avgGrade: 3,vals: [{grade: 3}, {grade: 3}, {grade: 3}]}, 
    {item: 3,avgGrade: 4,vals: [{grade: 4}, {grade: 4}, {grade: 4}]} 
]; 
var testVue = new Vue({ 
    el: '#container', 
    data: { 
     testData: data 
    }, 
    methods: { 
     calcAverage: function (e) { 
      //calculate the average of sub grades 
      //change Grade avg to show this 
     } 
    } 
}); 

Fiddle: https://jsfiddle.net/ksumarine/bwrvsmpk/

Спасибо!

Answer 1

Вы можете передать элемент повтора в вашей функции обратного вызова change события, так же, как это:

HTML

<div id="container"> 
    <div class="row" v-repeat="testData"> 
     <p>Grade avg: 
      <!--this should be average of sub grades that aren't 0--> 
      <input type="text" v-model="avgGrade" disabled /> 
      <div v-repeat="vals" v-with="subItem: $data">Sub grade {{item}}: 
       <input type="text" v-model="grade" v-on="change:calcAverage(subItem)" /> 
      </div> 
     </p> 
    </div> 
</div> 

JS

var data = [ 
    {item: 1,avgGrade: 2,vals: [{grade: 2}, {grade: 2}, {grade: 2}]}, 
    {item: 2,avgGrade: 3,vals: [{grade: 3}, {grade: 3}, {grade: 3}]}, 
    {item: 3,avgGrade: 4,vals: [{grade: 4}, {grade: 4}, {grade: 4}]} 
]; 

var testVue = new Vue({ 
    el: '#container', 
    data: { 
     testData: data 
    }, 
    methods: { 
     calcAverage: function (subItem) { 
      var total = 0, 
       length = subItem.vals.length; 

      for (var i = 0; i < length; i++) { 
       total += parseFloat(subItem.vals[i].grade); 
      } 

      subItem.avgGrade = total/length; 
     } 
    } 
}); 

Если предположить, что avgGrade - flo на, я использую parseFloat здесь, вы можете изменить его на parseInt, как вам нравится.

И вот JSFiddle.