Getting Started with Vue.js Chapter 1}
}
Pressing save will not do anything to our application - we need to call the function. In your
view, update the output to use the function and pass in the shirtPrice variable:
<div id="app">
{{ calculateSalesTax(shirtPrice) }}
</div>Save your documents and check the result in the browser - is it what you expected? The
next task is to prepend the currency. We can do that by adding a second method that
returns the parameter passed into the function with the currency at the beginning of the
number:
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price) +
price).toFixed(2);
},
addCurrency(price) {
return this.currency + price;
}
}In our view, we then update our output to utilize both methods. Rather than assigning to a
variable, we can pass the first function, calculateSalesTax, as the parameter for the
second addCurrency function. This works because of the first method,
calculateSalesTax, accepts the shirtPrice parameter and returns the new amount.
Instead of saving this as a variable and passing the variable into the addCurrency method,
we pass the result directly into this function, which is the calculated amount:
{{ addCurrency(calculateSalesTax(shirtPrice)) }}However, it would start to get tiresome having to write these two functions every time we
needed to output the price. From here, we have two options:
We can create a third method, titled cost() - which accepts the price parameter
and passes the input through the two functions
Create a computed function, such as shirtCost, which uses this.shirtPrice
instead of having a parameter passed in