I am in the process of creating a tool that calculates the cost of purchasing specific materials. One challenge I'm facing is that users sometimes buy by mass and other times by volume.
My goal is to have two active input fields (one for mass and one for volume) that automatically update based on the material density.
I attempted using computed properties and watchers, but couldn't achieve the desired functionality.
Here is the ideal layout I envision and what I've tried so far: https://jsfiddle.net/yfuk958j/
Mass = <input v-model.number="mass"> <br/>
Volume = <input v-model.number="volume"><br/>
computed: {
volume() {
return this.mass * this.density
},
mass () {
return this.volume / this.density
}
}