VueJS verknüpfte Eingänge

Question

Ich möchte mehrere Eingänge über VueJS verknüpfen und die Werte berechnen.

Die Eingaben dienen zum Nachverfolgen der Fahrzeugkilometerleistung und daher kann der Wert eines bestimmten Tages nicht unter dem Wert des Vortags liegen.

Bisher habe ich mit den folgenden (es ist sehr verworren und ich weiß, dass es in Ordnung gebracht werden kann, aber ich werde dazu später verbessern) kommen. Es funktioniert nicht, da Sie außer Montag Start keinen Wert ändern können.

https://jsfiddle.net/mstnorris/qbgtpm34/1/

HTML

<table id="app" class="table"> 
    <thead> 
    <tr> 
     <th>Day</th> 
     <th>Start</th> 
     <th>End</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th scope="row">Mon</th> 
     <td> 
      <input type="number" class="form-control" v-model="mon_start" number id="mon_start" placeholder="Monday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="mon_end" number id="mon_end" placeholder="Monday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Tue</th> 
     <td> 
      <input type="number" class="form-control" v-model="tue_start" number id="tue_start" placeholder="Tuesday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="tue_end" number id="tue_end" placeholder="Tuesday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Wed</th> 
     <td> 
      <input type="number" class="form-control" v-model="wed_start" number id="wed_start" placeholder="Wednesday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="wed_end" number id="wed_end" placeholder="Wednesday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Thu</th> 
     <td> 
      <input type="number" class="form-control" v-model="thu_start" number id="thu_start" placeholder="Thursday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="thu_end" number id="thu_end" placeholder="Thursday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Fri</th> 
     <td> 
      <input type="number" class="form-control" v-model="fri_start" number id="fri_start" placeholder="Friday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="fri_end" number id="fri_end" placeholder="Friday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Sat</th> 
     <td> 
      <input type="number" class="form-control" v-model="sat_start" number id="sat_start" placeholder="Saturday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="sat_end" number id="sat_end" placeholder="Saturday End Mileage"> 
     </td> 
    </tr> 
    <tr> 
     <th scope="row">Sun</th> 
     <td> 
      <input type="number" class="form-control" v-model="sun_start" number id="sun_start" placeholder="Sunday Start Mileage"> 
     </td> 
     <td> 
      <input type="number" class="form-control" v-model="sun_end" number id="sun_end" placeholder="Sunday End Mileage"> 
     </td> 
    </tr> 
    </tbody> 
</table> 

VueJS

new Vue({ 
    el: "#app", 
    data: { 
     mon_start: '', 
     mon_end: '', 
     tue_start: '', 
     tue_end: '', 
     wed_start: '', 
     wed_end: '', 
     thu_start: '', 
     thu_end: '', 
     fri_start: '', 
     fri_end: '', 
     sat_start: '', 
     sat_end: '', 
     sun_start: '', 
     sun_end: '' 
    }, 
    computed: { 
     mon_end: function() { 
      return this.mon_start 
     }, 
     tue_start: function() { 
      return this.mon_end 
     }, 
     tue_end: function() { 
      return this.tue_start 
     }, 
     wed_start: function() { 
      return this.tue_end 
     }, 
     wed_end: function() { 
      return this.wed_start 
     }, 
     thu_start: function() { 
      return this.wed_end 
     }, 
     thu_end: function() { 
      return this.thu_start 
     }, 
     fri_start: function() { 
      return this.thu_end 
     }, 
     fri_end: function() { 
      return this.fri_start 
     }, 
     sat_start: function() { 
      return this.fri_end 
     }, 
     sat_end: function() { 
      return this.sat_start 
     }, 
     sun_start: function() { 
      return this.sat_end 
     }, 
     sun_end: function() { 
      return this.sun_start 
     } 
    } 
}) 

Answer 1

Warum funktioniert das nicht so weit arbeiten?

Sie mischen Dateneigenschaftsnamen mit berechneten Eigenschaften, so wird der Wert aus der berechneten Eigenschaft gelesen werden (get) und es wird versuchen, es zu schreiben, wieder auf die gleiche berechnete Eigenschaft, die Arbeit gewohnt, da Sie nicht haben eine setter zugewiesen.

Wenn Sie immer den Wert mon_start in mon_end usw. anzeigen lassen, können Sie den aktualisierten Wert mon_end in mon_end nicht anzeigen.

Computed: Getter und Setter

Was Sie wirklich wollen, ist eine benutzerdefinierte Aktion geschehen, wenn ein neuer Wert gesetzt wird (zum Beispiel wird mon_start-2 gesetzt, damit alle anderen Felder sollten 2 eingestellt werden).

Jetzt könnten wir einfach sagen: Wenn mon_start aktualisiert wird, aktualisieren Sie mon_end. Wenn mon_end aktualisiert wird, aktualisieren Sie tue_start. Und so weiter.

kann dies erreicht werden unter Verwendung von computed setters:

mon_start_model: { 
     get: function() { 
       return this.mon_start 
      }, 
     set: function(val) { 
      this.mon_start = val 
      this.mon_end_model = this.mon_start 
     } 
    }, 

ich das Beispiel ein wenig vereinfacht haben (mit nur Montag und Dienstag).

verwirrend Vermeidung der Benutzer

Als zusätzliche Bedingung für Benutzerfreundlichkeit, Sie wollen wahrscheinlich nur der nächste Wert zu aktualisieren, wenn der nächste Wert kleiner oder gleich dem vorherigen Wert.

Eg. mon_start ist 1 am Anfang, dann aktualisieren Sie mon_end zu 5, dann aktualisieren Sie mon_start zu 3. Sie wollen wahrscheinlich mon_end, um den Wert 5, richtig zu halten?

new Vue({ 
    el: "#app", 
    data: { 
     mon_start: 0, 
     mon_end: 0, 
     tue_start: 0, 
     tue_end: 0, 
    }, 
    computed: { 
     mon_start_model: { 
      get: function() { 
        return this.mon_start 
       }, 
      set: function(val) { 
       this.mon_start = val 
       this.mon_end_model = Math.max(this.mon_end, this.mon_start) 
      } 
     }, 
     mon_end_model: { 
      get: function() { 
       return this.mon_end 
      }, 
      set: function(val) { 
       this.mon_end = val 
       this.tue_start_model = Math.max(this.tue_start, this.mon_end) 
      } 
     }, 
     tue_start_model: { 
      get: function() { 
       return this.tue_start 
      }, 
      set: function(val) { 
       this.tue_start = val 
       this.tue_end_model = Math.max(this.tue_end, this.tue_start) 
      } 
     }, 
     tue_end_model: { 
      get: function() { 
       return this.tue_end 
      }, 
      set: function(val) { 
       this.tue_end = val 
      } 
     } 
    } 
}) 

https://jsfiddle.net/qbgtpm34/5/