如果 0，VueJS 不顯示輸入值

Question

我有一個從我的數據庫預先填充的輸入字段，但如果值為0 ，我不希望它被預先填充

例如：

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

如果

  data: {
 price: 0
}

我不希望我的輸入字段顯示 0，我知道我可以執行諸如:disabled="price == 0"但這會隱藏整個輸入字段，我只是不想顯示該值0

Answer 1

當價格為 0 時，只需將價格更改為空字符串：

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

Answer 2

據我了解，當 price 值為0 ，即使用戶手動輸入它，您也希望始終有空輸入。如果這是真的，這樣的事情應該適合您：

<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()
  }


})

演示： http : //jsbin.com/sihuyotuto/edit?html,js,output