VueJS鏈接的輸入

Question

我想通過VueJS鏈接多個輸入並計算值。

輸入的是跟蹤車輛行駛里程，因此任何給定的一天的價值都不能低於前一天的價值。

到目前爲止，我想出了以下（這是非常令人費解，我知道這是可以收拾，但我會提高稍後）。它不起作用，因爲除了星期一開始之外，您無法更改任何值。

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

爲什麼這個不那麼遠工作？

您正在混合數據屬性名稱與計算屬性，所以該值將從計算屬性（get）中讀取，它會嘗試將其寫回到相同的計算屬性，這將無法正常工作，因爲您沒有分配了setter。

此外，總是顯示mon_start的值在mon_end等等不會允許您顯示更新值mon_end在mon_end。

式計算：getter和setter

你真正想要的是一個自定義操作，當一個新的值設置爲發生（例如mon_start設置爲2，因此所有其他領域應設置爲2）。

現在我們只能說：如果mon_start已更新，請更新mon_end。如果mon_end已更新，請更新tue_start。等等。

這可以使用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 
     } 
    }, 

我已經簡化的例子一點點（只使用星期一和星期二）。

避免混淆用戶

至於用戶友好的額外條件，你可能只需要下一個值來更新，如果下一個值小於或等於以前的值。

例如， mon_start爲1開頭，則更新mon_end爲5，則更新mon_start爲3。你可能想要mon_end保持值5，對吧？

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/