如何使用 v-model 和输入字段隐藏默认值？

Question

我有一个带有 v-model 的输入字段，在数据中设置了一个变量：

  <div class="resource-cost--mat-one">
    <h3>Material 1</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="text" v-model="matOneCost">
  </div>

  <div class="resource-cost--mat-two">
    <h3>Material 2</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="text" v-model="matTwoCost">
  </div>

  <div class="resource-cost--mat-three">
    <h3>Material 3</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="text" v-model="matThreeCost">
  </div>

  <div class="resource-cost--total">
    <h4>Total</h4>
    <p>{{ totalCost() }}</p>
  </div>

和

  data() {
    return {
      matOneCost: 0,
      matTwoCost: 0,
      matThreeCost: 0
    }
  },
  methods: {
      totalCost() {
        let totalCost = parseInt(this.matOneCost) + parseInt(this.matTwoCost) + parseInt(this.matThreeCost)
        return totalCost;
      }
  }

默认情况下，输入字段的值为 0，我必须将其删除并键入我实际要输入的值。

我尝试将数据值设置为一个字符串，它确实摆脱了默认值，但是，直到每个字段都有数据，它才会返回 NaN。

我还尝试使用以下输出：

<p>{{ totalCost() || 0 }}</p>

这也有效，直到我开始输入一个数字，它会再次输出 NaN，直到所有 3 个都被填满。

在幕后，我只想要默认值 0，这样一两个字段就可以在没有第三个字段的情况下填充和计算，也不会自动填充输入字段。

谢谢

Answer 1

在计算每个属性时添加条件并使用计算属性而不是方法：

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      matOneCost: 0,
      matTwoCost: 0,
      matThreeCost: 0
    }
  },
  computed: {
    totalCost() {
      let totalCost = +(this.matOneCost || 0) + (+this.matTwoCost || 0) + (+this.matThreeCost || 0)
      return totalCost;
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <div class="resource-cost--mat-one">
    <h3>Material 1</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="number" v-model="matOneCost">
  </div>

  <div class="resource-cost--mat-two">
    <h3>Material 2</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="number" v-model="matTwoCost">
  </div>

  <div class="resource-cost--mat-three">
    <h3>Material 3</h3>
    <label>Cost <span>(per KG.)</span></label>
    <input class="" type="number" v-model="matThreeCost">
  </div>

  <div class="resource-cost--total">
    <h4>Total</h4>
    <p>{{ totalCost }}</p>
  </div>
</div>