Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Aikaa on 30.6. saakka.

Keskustelu: Ohjelmointiongelmat: JavaScript, PHP: Laravel ja Vue: yhteenlasku

Sivu 1 / 1

runeberg [22.02.2020 14:29:59]

#

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ä?

The Alchemist [22.02.2020 19:22:23]

#

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.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta