Can the two computational properties of vue depend on each other?

clipboard.png

as shown in the figure, excluding the interdependence of tax unit price and tax unit price, modifying one of them will recalculate the other according to the tax rate, while modifying the tax rate will recalculate the unit price including tax. How to realize this demand

Mar.11,2021

do not depend on each other. Bind two input to two input events


the tax rate should be in data, and bind v-model
but does not include tax unit price can be calculated. Therefore, as a calculation attribute


you do not need two calculation attributes
vue. The calculation phase supports get and set respectively. Just set get and set for the price including tax


the following is pseudo code (only shows logic, tax not tax calculation may be incorrect):
add: text box binds calculation attribute

data(){
  price:0.00,
  rate:0.003,
  priceWithoutRate:0.00
},
computed:{
  priceBind:{
    get(){return this.price;}
    set(val){this.price=val;this.priceWithoutRate=this.price*(1-this.rate);}
  },
  priceWithoutRateBind:{
    get(){return this.priceWithoutRate;}
    set(val){this.priceWithoutRate=val;this.price=this.priceWithoutRate*(1+this.rate);}
  }
}
Menu