Vue.js propriétés calculées circulaires

Question

J'ai un applicated qui nécessite la mise à jour de deux champs qui dépendent les uns des autres pour leurs valeurs.

Par exemple:

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

Les deux valeurs "passées" dépendent d'une valeur "totale" statique. Je vais stocker le spend_dollar, et le pourcentage sera initialement dérivé de cela.

Maintenant, si l'utilisateur met à jour le pourcentage, j'ai besoin de la valeur monétaire pour mettre à jour. Si elles mettent à jour la valeur en dollars, j'ai besoin du pourcentage à mettre à jour.

A partir de maintenant, cela ne fonctionne évidemment pas. Des mises à jour circulaires sont en cours. Comment concevez-vous vos données pour permettre cette fonctionnalité dans Vue.js?

Answer 1

On dirait que vous pourriez utiliser des montres et un mutex. Prendre une idée du traitement parallèle j'ai construit un JSfiddle pour mettre en valeur cette idée

<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 
     } 
    } 
    } 
})