How to remove default value from input number in vue?

Question

I have a Vue input number component which accepts precision upto five decimal points. Its all fine except it shows the default value 0.000000 which is kinda boring to look at because this field is optional. I am using el-input-number component from the element-ui. Is there any tweak to remove the boring default value of 0.000000 ?

<span class="custom-label">
Optional Multiplier Amount
</span>
<el-input-number
   :controls="false"
   v-model="form.multiplier_amount"
   :size="size"
   :step="0.1"
   :precision="5"
   class="optional-multiplier"
   />

data(){
 return{
  form: {
    multiplier_amount: null
        }
       }
      }

if placeholder="..." doesn't work add a ref to access the element (or traverse through it to the input) to change the placeholder — Lawrence Cherone
– Lawrence Cherone, Commented Apr 18, 2022 at 12:46
You could maybe have multiplier_amount: 0.00000 || '' in your data()/computed(). — kissu
– kissu, Commented Apr 18, 2022 at 12:47
oh right so form.multiplier_amount = 0.00000? then its obvious, remove the value :/ — Lawrence Cherone
– Lawrence Cherone, Commented Apr 18, 2022 at 12:48

Nikola Pavicevic · Accepted Answer · 2022-04-18 13:27:33Z

2

Just set it as undefined:

new Vue({
  el: "#demo",
  data(){
    return{
      form: {
        multiplier_amount: undefined
      },
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="demo">
  <span class="custom-label">
    Optional Multiplier Amount
  </span>
  <el-input-number
    :controls="false"
    v-model="form.multiplier_amount"
    :step="0.1"
    class="optional-multiplier"
    :precision="5"
  />
</div>

edited Apr 18, 2022 at 13:27

answered Apr 18, 2022 at 13:14

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gitam gadtaula Over a year ago

Thank you for your answer but still if you run your example it will have a default value of 0, which is exactly what I wanted to remove. 0.00000 or 0 is same thing, I just need to force users to have max 5 points. So it still doesn't answer my question.

Nikola Pavicevic Over a year ago

@gitam gadtaula hey mate, take a look again I corrected my answer

gitam gadtaula Over a year ago

Thanks it works. By the way is it possible that having the default value as undefined may bring unprecedented complication in the future ? What might be the effect of using undefined over null ?

Nikola Pavicevic Over a year ago

In your context no worries I think :)

Collectives™ on Stack Overflow

How to remove default value from input number in vue?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related