How to use results with computed in data in vue?

Question

Vue.js

Hello. I have this simplified example: https://jsfiddle.net/8d6khn0L/
The calc function calculates the area and perimeter based on user input. I need to use these values ​​to calculate the markup when selecting options. For example, when selecting the first checkbox, multiply its price value with the calculated area and display it in {{option.margin}} . How to do it?

Answer 1

Add a property to the options that will indicate what price should be multiplied by:

options: [
  {
    ...
    propToBeMultipliedByPrice: 'area',
  },
  {
    ...
    propToBeMultipliedByPrice: 'perimeter',
  },
],

And multiply:

{{ option.price * calc[option.propToBeMultipliedByPrice] }}

Answer 2

What's in {{}} is a java script so you can write any expression.
Although it's better to add 2 method calculateMargin and call it instead of date