Olen palannut taas ohjelmoinnin pariin ja harjoittelen nyt laravelia ja vue:ta. Harjoitteluohjelmassani on tarkoitus käydä asiakkaat ja niihin kohdistuneet työpäivät läpi. Talteen pitäisi saada sitten kunkin asiakkaan työpäivien tuntien yhteistulos.
En vaan löydä oikeaa lähestymistapaa. Olen yrittänyt purkkaviritystä, eli laskee tablen solujen summan yms. mutta haluaisin tietää, miten noita frameworkeja voisi oikeaoppisesti hyödyntää.
Saan toki serveripuolella laskettua myös tunnit yhteen, mutta taulukossa on checkboxi, millä valitaan tai poistetaan kyseinen päivä lopputulokseen ja tuntien pitäisi sen mukaan päivittyä dynaamisesti.
Koodia:
<div class="container">
<div id="table-list-workdays-by-customer">
@foreach ($customers as $customer)
@if(count($customer->workdays) > 0)
<h1>{{ $customer->getPersonOrCompany() }}</h1>
<table id = "customer-workdays">
<tr>
<th>Valitse</th>
<th>Tuntityyppi 1</th>
<th>Tuntityyppi 2</th>
<th>Tuntityyppi 3</th>
<th>Kohde</th>
</tr>
@foreach ($customer->getWorkdays() as $workday)
<tr>
<td><input type="checkbox" @change="calculateHours" checked></td>
<td>{{ $workday->hours1 }}</td>
<td>{{ $workday->hours2 }}</td>
<td>{{ $workday->hours3 }}</td>
<td>{{ $workday->workside->getNameOrAddress() }}</td>
@endforeach
</table>
<table id="customer-summary">
<tr>
<th>Työpäivät yht.</th>
<th>Tuntityyppi 1yht.</th>
<th>Tuntityyppi 2 yht.</th>
<th>Tuntityyppi 3 yht.</th>
</tr>
<tr>
<td>{{ count($customer->workdays) }}</td>
<td>@{{ totalHours1 }}</td>
<td>@{{ totalHours2 }}</td>
<td>@{{totalHours3 }}</td>
</tr>
</table>
@endif
@endforeach
</div>
</div>Vue koodi:
var listWorkdaysByCustomer = new Vue({
el: '#table-list-workdays-by-customer',
data: {
totalHours1: 0,
totalHours2: 0,
totalHours3: 0,
},
methods: {
calculateHours: function() {
// Tähän tarttis jotain...
}
}
});Eli en keksi, miten bindais tunnit tuolle calculateHours funktiolle kun rivit on listattu. Vai pitäiskö koko helahoito heittää vue:lle ja generoida taulukko sillä?
Sinun pitäisi ehdottomasti ensin oppia se, miten Vuen kaltaisia frameworkeja käytetään. Ne eivät ole jQuery-klooneja – jos haet sellaista, niin käytä suosiolla jQueryä sitten.
Aihe on jo aika vanha, joten et voi enää vastata siihen.