CODEWITHSUNDEEP
javascriptvue.jsvuejs2
user2722667
user2722667

Reputation: 8661

VueJS dont display input value if its 0

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

Upvotes: 8

Views: 5160

Answers (2)

Tomer
Tomer

Reputation: 17940

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 || ''
  }

Upvotes: 6

Belmin Bedak
Belmin Bedak

Reputation: 9201

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

Upvotes: 1

Related Questions