VueJS dont display input value if its 0

Question

I have an input field that gets pre-populated from my DB, but I won't want it to be pre-filled if the value is 0

Eg:

<input v-model="price" type="text">

If

  data: {
 price: 0
}

I don't want my input field to display 0, I know that I can do stuff like :disabled="price == 0" but this will hide the whole input field, I just don't want to display the value if its 0

What about programatically changing the value from 0 to "" in the model? Would that work? — Borjante
– Borjante, Commented Aug 29, 2017 at 10:59

Tomer · Accepted Answer · 2017-08-29 11:29:28Z

6

Simply change price to empty string when it's 0:

created() {
    //since 0 is considered false it will put an empty string in case priceFromDB is 0
    this.price = priceFromDB || ''
  }

answered Aug 29, 2017 at 11:29

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

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

Comments

Belmin Bedak · Accepted Answer · 2017-08-29 11:23:58Z

1

As I understood you want to always have empty input when value of price is 0, even if user type It manually.If that's true, something like this should work for you:

<div id="app">
    <input type="text" v-model="price" @keyup="trackChange">
</div>

JS:

const app = new Vue({

  el: '#app',

  data: {
    price: 0
  },

  methods: {
    trackChange() {
      this.price = parseInt(this.price) === 0  ? null : this.price
    }
  },

  created() {
    this.trackChange()
  }


})

Demo: http://jsbin.com/sihuyotuto/edit?html,js,output

answered Aug 29, 2017 at 11:23

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Collectives™ on Stack Overflow

VueJS dont display input value if its 0

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related