Problems with q-input

[davidhalsted]

Hello, I am having an odd problem with entering currency amounts using q-input. Setting type to number and :decimals to 2 works great on its own. I also have a function to add up the results as they come in. If the user tries to enter a decimal point with the function running, the decimal point gets wiped out. This only happens if I try to add the results on @input. If I don’t add them up, the component works as expected (but then I don’t get my running total). Any ideas?

[Hawkeye64]

Perhaps some snippets from your code might help.

[davidhalsted]

Fair enough!

In a v-for that loops over the lines of the report once it is loaded:

<q-input v-model="reportLine.sales_total" float-label='Sales' type="number" :decimals="2" align="right" @input="calcTotalMobile"/>

The report is loaded via a call to a Web service in created().

Code:

export default {
   data () {
      return report: {},
  },
 methods: {
    calcTotalMobile: function () {
          let daysale = 0
         for (let i = 0; i < this.report.reportLines.length; i++) {
            daysale += this.report.reportLines[i].sales_total
          }
          this.report.weekly_sales_total = daysale
    }
 }
}

If I comment out the line

this.report.weekly_sales_total = daysale

q-input accepts decimals, but not if it is active.

[Hawkeye64]

I haven’t looked into the Quasar code for this, but if it’s passthough to the input tag, maybe it’s passing the decimals to the step parameter. if so, then it needs to read as decimals="0.01" - not sure if this will work for you but worth a try.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number