Calculating Discounted Price with a Computed Property in Vue

This challenge focuses on implementing a computed property in a Vue.js application using TypeScript. Computed properties are essential for deriving values based on reactive data, ensuring efficient updates and cleaner component logic. You'll be building a component that calculates a discounted price based on an original price and a discount percentage.

Problem Description

You are tasked with creating a Vue component that displays an original price, a discount percentage, and the calculated discounted price. The discounted price should be dynamically calculated using a computed property. The component should reactively update the discounted price whenever either the original price or the discount percentage changes.

What needs to be achieved:

• Create a Vue component with two data properties: originalPrice (number) and discountPercentage (number).
• Implement a computed property named discountedPrice that calculates the discounted price based on originalPrice and discountPercentage. The formula is: discountedPrice = originalPrice * (1 - discountPercentage / 100).
• Display the originalPrice, discountPercentage, and discountedPrice in the component's template.
• Provide input fields for the user to modify originalPrice and discountPercentage.

Key requirements:

• The discountedPrice must be a computed property, not a method.
• The component must be written in TypeScript.
• The component should handle potential edge cases (see below).

Expected behavior:

• When the originalPrice or discountPercentage changes, the discountedPrice should automatically update in the template.
• The discountedPrice should be formatted to two decimal places.

Edge cases to consider:

• discountPercentage greater than 100: The discountedPrice should be 0.
• originalPrice less than or equal to 0: The discountedPrice should be 0.
• discountPercentage less than 0: The discountedPrice should be equal to the originalPrice.

Examples

Example 1:

Input: originalPrice = 100, discountPercentage = 10
Output: discountedPrice = 90.00
Explanation: 100 * (1 - 10/100) = 100 * 0.9 = 90

Example 2:

Input: originalPrice = 50, discountPercentage = 20
Output: discountedPrice = 40.00
Explanation: 50 * (1 - 20/100) = 50 * 0.8 = 40

Example 3:

Input: originalPrice = 100, discountPercentage = 110
Output: discountedPrice = 0.00
Explanation: 100 * (1 - 110/100) = 100 * (-0.1) = -10.  However, the discounted price should be 0 when the discount is greater than 100%.

Example 4:

Input: originalPrice = -10, discountPercentage = 50
Output: discountedPrice = 0.00
Explanation: originalPrice is negative, so discountedPrice should be 0.

Constraints

• The originalPrice and discountPercentage must be numbers.
• The discountedPrice must be formatted to two decimal places.
• The component should be reasonably performant (no unnecessary calculations or re-renders).
• Use Vue 3 and TypeScript.

Notes

• Consider using the computed property in Vue's options API.
• Use template literals or string interpolation for displaying the values.
• Think about how to handle the edge cases mentioned above to ensure the component behaves correctly under all circumstances.
• Focus on writing clean, readable, and maintainable code. Properly type your data and computed properties.
• You can use a library like vue-currency-input for formatting the price, but it's not required. Simple string formatting is sufficient.