Disable change on scroll for number field with Vue

When working with inputs of type number,  it will automatically have those arrows to increase or decrease the value. What is less obvious is that the browser will also increase or decrease the value in the field if you have the field in focus and are scrolling. This is a behaviour which I as a developer don't expect and am pretty sure the usual enduser won't understand. I find this especially troubling when working with prices, because scrolling on a form will trigger a price change.

In my opinion this feature will more often lead to unintended changes then it's used on purpose. I myself stumbled over it and searched for the issue in my code before I realized that "I changed" the number myself in the form through scrolling.

Luckily when working with Vue we can use the @wheel event handler to overwrite the behaviour. What we want to do here is just exit the behaviour, which we can do like this:

<v-text-field type="number" @wheel="$event.target.blur()" v-label="Price" model="form.fields.additionalCosts" :rules="form.rules.additionalCosts" step="0.01" />

This way there can't be any accidental price increases or decreases.