Use format mask to stringify dollar amount

js/components/forms/details_of_use.js

@@ -1,3 +1,6 @@
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import { conformToMask } from 'vue-text-mask'
+
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 
@@ -39,6 +42,9 @@ export default {
       const monthlySpend = this.estimated_monthly_spend || 0
       return monthlySpend * 12
     },
+    annualSpendStr: function () {
+      return this.formatDollars(this.annualSpend)
+    },
     jediMigrationOptionSelected: function () {
       return this.jedi_migration !== ''
     },
@@ -51,6 +57,10 @@ export default {
   },
 
   methods: {
+    formatDollars: function (intValue) {
+      const mask = createNumberMask({ prefix: '$', allowDecimal: true })
+      return conformToMask(intValue.toString(), mask).conformedValue
+    },
     handleFieldChange: function (event) {
       const { value, name } = event
       if (typeof this[name] !== undefined) {