Vue: two way computed

 from Red Blob Games
1 Feb 2022

Someone asked on the Vue discord about a currency converter that has two input boxes. If you change either of them, the other one should be updated. Does Vue's v-model allow this? I decided to try.

Let me first do it without v-model:

USD:
DOGE:

Source code: vue-two-way-computed.js ; also made a fiddle https://jsfiddle.net/m418y3v7/[1]

But what about v-model and computed? @skirtle has it figured out https://jsfiddle.net/skirtle/wo16c3k5/1/[2]

USD:
DOGE:

The complication will be the formatting, which would be easier to control with the first approach. Floats complicate things too. Try entering 5 into the DOGE input, and it will turn into 4.99999999999 in the second example but stay 5.000 in the first example.

Email me , or tweet @redblobgames, or comment: