javascript - 我有不会添加的数字（我必须保留为字符串）。他们只是连接数字

Question

这是 HTML 和 JS 或我的字段的副本。我必须保留这个字符串，那么我该如何解析和加/减呢？或者有什么方法可以翻转到数字然后返回到字符串？不确定在不更改为数字/整数的情况下解决此问题的最佳方法。

      <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
          <label>Total Sum Due <span class="note">2</span></label>
          <input type="text" class="form-control" v-model="document.money_due" placeholder="">
        </div>
      </div>
          <div class="row">
  <div class="col-sm-12 col-md-6 col-lg-4">
    <div class="form-group">
      <label>First Month (in USD) <span class="note"></span></label>
      <input type="text" class="form-control" v-model="document.first_month" placeholder="">
      <p-check class="p-svg p-curve m-2" color="success" v-on:change="paidFirstMonth" v-model="document.is_first_month" value="1">
        <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20"><path d="z" style="stroke: white;fill:white"></path></svg>
        <label>PAID</label>
      </p-check>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4">
    <div class="form-group">
      <label>Last Month (in USD) <span class="note"></span></label>
      <input type="text" class="form-control" v-model="document.last_month">
      <p-check class="p-svg p-curve m-2" color="success" @change="paidLastMonth" v-model="document.is_last_month" value="1">
        <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20"><path d="" style="stroke: white;fill:white"></path></svg>
        <label>PAID</label>
      </p-check>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4">
    <div class="form-group">
      <label>Security Deposit (in USD) <span class="note"></span></label>
      <input type="text" class="form-control" @change="hasSecurity" v-model="document.security_deposit" value="1">
      <p-check class="p-svg p-curve m-2" color="success" @change="paidSecurity" v-model="document.is_security_deposit" value="1">
        <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20"><path d="" style="stroke: white;fill:white"></path></svg>
        <label>PAID</label>
      </p-check>
    </div>
  </div>
</div>



 data() {
  return {
    now: new Date().toISOString(),
    loaded: false,
    document: {
        first_month: '',
        last_month: '',
        security_deposit: '',
    }
  }
}


  monthlyRent() {
    if(this.document.lease_month != '') {
        this.document.money_due = this.document.first_month + this.document.last_month + 
        this.document.security_deposit;
    }
  },

标签： javascriptvue.jslaravel-5