Vue.js循環計算屬性

我有一個應用程序需要更新兩個相互依賴的值的字段。Vue.js循環計算屬性

例如：

<template> 
    <tr> 
     <td>{{total}}</td> 
     <td><input type="text" v-model="calculateEarnedPercentage" @change="updatedForecastPercentage"></td> 
     <td><input type="text" v-model="spent_dollar"></td> 
    </tr> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       total: 1000000, 
       spent_percentage: '', 
       spent_dollar: 20000, 
      } 
     }, 
     methods: { 
      updatedForecastPercentage() { 
       this.vendor.regional_forecast_dollar = this.vendor.purchases/(this.vendor.regional_forecast_dollar/100) 
      } 
     }, 
     computed: { 
      calculateEarnedPercentage() { 
       return (this.vendor.regional_forecast_dollar/this.vendor.purchases) * 100 
      } 
     } 
    } 
</script>

兩個「用過的」值取決於靜態「總」值。我將存儲spent_dollar，並從中最初派生出百分比。

現在如果用戶更新百分比，我需要更新美元值。如果他們更新美元值，我需要更新百分比。

截至目前，它顯然不工作。循環更新正在發生。您如何設計數據以在Vue.js中允許此功能？

來源

2017-05-08 Gurnzbot

一個是真實的數據項，另一種是計算的可寫的。 –

如果您正在執行'v-model =「計算屬性」'，則考慮爲此計算屬性（'set' prop）定義一個'setter'。在這個setter中，你可以根據改變的結果值，將一些邏輯應用到你的變量中。閱讀它：https：//vuejs.org/v2/guide/computed.html#Computed-Setter – wostex

@wostex謝謝！我不知道get/set動態。 – Gurnzbot

看起來你可以使用一些手錶和互斥鎖。以從並行處理的想法，我建了JSfiddle，以展示這個想法

<div id="app"> 
    <span>{{ total }}</span> 
    <span><input type="text" v-model.number.lazy="spent_percentage"></span> 
    <span><input type="text" v-model.number.lazy="spent_dollar"></span> 

    <pre>{{ $data }}</pre> 
</div> 

new Vue({ 
    el: '#app', 
    data() { 
    return { 
     total: 1000000, 
     spent_percentage: 5.0, 
     spent_dollar: 20000, 
     mutex: false, 
     vendor: { 
     purchases: 2358, 
     regional_forecast_dollar: 1 
     } 
    } 
    }, 
    watch: { 
    spent_percentage: function(value, old_value) { 
     if (!this.mutex) { 
     this.mutex = true 

     this.spent_dollar = (this.vendor.purchases * value)/100; 
     this.spent_percentage = value; 

     this.mutex = false 
     } 
    }, 
    spent_dollar: function(value, old_value) { 
     if (!this.mutex) { 
     this.mutex = true 

     this.spent_dollar = value; 
     this.spent_percentage = (value/this.vendor.purchases) * 100; 

     this.mutex = false 
     } 
    } 
    } 
})

來源

2017-05-09 17:56:24

Vue.js循環計算屬性

回答

相關問題