How to pass 1 more value to Vue?

Question

Vue.js

I'm making a calculator like this

. I connected the first select with the choice of a number - everything recalculates https://codepen.io/Superusernameone/pen/RwrwxRW?ed...

But how to display the result of recalculation in tons? I added the values ​​1.7 and 1.4 in the array for each object (on the first site there are only 2 values ​​of tons from m3 for all selects) and I want to display the value in tons when choosing a certain select and number, too, i.e. just multiply the number from the object of the selected select by the number that is being selected

Answer 1

When calculating totalTon, look up the selected option by its value:

totalTon() {
  return this.number * this.options.find(n => n.value === this.selected).ton;
},

Or instead :value="option.value"do :value="option".
Then the computed properties will take the following form:

total() {
  return this.number * this.selected.value;
},
totalTon() {
  return this.number * this.selected.ton;
},

Well, the default value of selected in this case will also have to be corrected.