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

Posted

技术标签:

【中文标题】如何使用 v-model 和输入字段隐藏默认值?【英文标题】:How to hide default value with v-model and input fields? 【发布时间】:2021-09-17 03:29:34 【问题描述】:

我有一个带有 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,这样一两个字段就可以在没有第三个字段的情况下填充和计算,也不会自动填充输入字段。

谢谢

【问题讨论】:

【参考方案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>

【讨论】:

这对于默认值为零非常有效,但默认情况下输入字段中仍然有一个零......知道如何删除它吗?谢谢! 不客气,您可以通过空字符串 '' 初始化绑定属性 啊,是的,呃。非常感谢您的帮助:D

以上是关于如何使用 v-model 和输入字段隐藏默认值?的主要内容,如果未能解决你的问题,请参考以下文章

vue常用14个指令

SQL如何使用 alter column语句添加字段的默认值(defualt)?

当对象中的字段发生更改时如何从 v-model 数组中删除对象

如何用 Vue 交换输入字段?

隐藏或排除前端表单中的 ACF 字段并存储默认值

如何从另一个输入文本字段Javascript中输入的值将值设置为输入隐藏字段