时间戳

首页 > 解决方案 > 过滤模型仅在第 3 个字符处结束并返回空白

javascript - 过滤模型仅在第 3 个字符处结束并返回空白

问题描述

所以我只是接受一个模型的值（'temp_dollars'）并且有一个 watch 属性来检查模型然后过滤它。但是，每次我在输入中写一些东西时，它只会在 3 个字符处停止并重置。

例如：当我写123时，模型值将是 123 但是当我写1234 它将返回 0

Vue.filter('to_currency', (val) => {
  // let arr = val.toString().split('').reverse();
  // let num = 0;
  // let string = "";
  // let new_string = "";
  // let temp_arr;

  // _.forEach(arr, (value, key) => {
  //   if(key % 3 === 0 && key !== 0){
  //     string += ` ${value}`
  //   } else{
  //     string += value
  //   }
  // })

  // temp_arr = string.split(' ')

  // _.forEach(temp_arr, (value, key) => {
  //   temp_arr[key] = value.split('').reverse().join('')
  // })

  // return temp_arr.reverse().join().toString()

  let string = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'PHP' }).format(val).toString()
  return string.substr(4, string.length - 7)
})


watch : {
    temp_dollars (val) {
        this.temp_dollars = this.$options.filters.to_currency(val)
        console.log(this.temp_dollars)
        console.log(this.$options.filters.to_currency(val))
    }
}

我希望当您在输入中键入内容时，它会自动被过滤，因此输入框中的1234将是1,234

** 更新 **

这是我的家.vue

<template>
  <div class="home--inner container mt-5">

        <!-- Errors -->
        <alert-error :isError="error"></alert-error>

        <!-- New Record -->
    <div class="form-row" v-show="!edit_record">
      <div class="col" >
        <div class="form-group">
          <label>Name</label>
          <input 
            type="text" 
            class="form-control" 
            v-bind:name="name" 
            v-bind:disabled="!new_record" 
            v-model="temp_name" 
            placeholder="Enter name..." 
            ref="name">
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label>Money</label>
          <input 
            type="text" 
            class="form-control" 
            v-bind:money="dollars" 
            v-bind:disabled="!new_record" 
            v-model="temp_dollars" 
            placeholder="Enter dollars..."> 
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group">
          <label>_____________________</label>
            <div class="btn-group w-100">
                <button class="btn btn-primary w-100" @click="insertRecord" v-show="new_record">Convert</button>
                <button class="btn btn-success w-100" @click="newRecord" v-show="!new_record">New</button>
            </div>
        </div>
      </div>
    </div>

        <!-- Edit Record -->
        <div class="form-row" v-show="edit_record">
          <div class="col" >
            <div class="form-group">
              <label>Name</label>
              <input type="text" class="form-control" v-model="edit_name" placeholder="Enter name...">
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <label>Money</label>
              <input type="text" class="form-control" v-model="edit_dollars" placeholder="Enter dollars..."> 
            </div>
          </div>
          <div class="col-md-2">
            <div class="form-group">
              <label>_____________________</label>
                <div class="btn-group w-100">
                    <button type="submit" class="btn btn-outline-primary w-100" @click="updateRecord">Update</button>
                </div>
            </div>
          </div>
        </div>

        <!-- Money Changer -->
    <money-changer :name="name" :dollars="dollars" @send:peso="convertToPeso" v-show="show_jumbo"></money-changer>

        <!-- History Table -->
    <history-table :history="history" @edit:history="editRecord" @delete:history="deleteRecord"></history-table>
  </div>
</template>

<script>
    import Money from './Money'
    import Table from './Table'
    import Storage from './Storage'
    import Error from './layouts/Error'

    export default {
        // Components
        components : {
            'money-changer' : Money,
            'history-table' : Table,
            'alert-error' : Error,
        },

        // Data
        data () {
            return {
                name : '',
                temp_name : '',
                dollars : '',
                temp_dollars : '',
                error : false,
                history : [{id : 1,name : "Ernie",dollars : "1",peso : "54",}, {id : 2,name : "Jeash",dollars : "2",peso : "108",}, {id : 3,name : "Villahermosa",dollars : "1",peso : "54",}],
                history_item : [],
                id : 1,
                show_jumbo : false,
                new_record : false,
                edit_record : false,
                edit_name : '',
                edit_dollars : '',
                var : ''
            }
        },

        // Methods
        methods : {
            convertToPeso (peso_from_child) {
                this.peso = peso_from_child

                if(this.edit_record){
                    this.name = this.edit_name
                    this.dollars = this.edit_dollars
                } else{
                    this.name = this.temp_name
                    this.dollars = this.temp_dollars
                }


            },

            newRecord () {
                this.new_record = true
                this.temp_name = ""
                this.temp_dollars = ""
                this.show_jumbo = false
            },

            insertRecord () {
                this.show_jumbo = true

                this.history.push({
                    id : ++this.id,
                    name : this.temp_name,
                    dollars : this.temp_dollars,
                    peso : this.peso,
                })

            },

            deleteRecord (id){
                let index = this.history.findIndex((x) => x.id === id)
                this.show_jumbo = false
                this.history.splice(index, 1)
            },

            editRecord (id) {
                this.show_jumbo = false
                this.edit_record = true
                this.history_item = this.history.find((x) => x.id === id)
                this.edit_name = this.history_item.name
                this.edit_dollars = this.history_item.dollars
            },

            updateRecord (id) {
                this.temp_name = this.edit_name
                this.temp_dollars = this.edit_dollars
                this.show_jumbo = true

                this.edit_record = false

                this.history_item.name = this.edit_name
                this.history_item.dollars = this.edit_dollars
                this.history_item.peso = this.peso
            }
        },

watch : {
    temp_dollars (val) {
        // this.temp_dollars = val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }
}
    }
</script>

** 更新 **

这里有一个更简单的

<template>
  <div id="app">
    <input type="text" v-model="val">
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      val: 1234
    };
  },

  watch: {
    val(x) {
      this.val = Number(x)
        .toLocaleString("en")
        .toString();
    }
  }
};
</script>

标签： javascriptvue.jsvuejs2

解决方案

我不确定我是否在回答您提出的问题，但您似乎要解决的问题是将数字格式化为货币，然后删除货币符号 + 小数位数。

如果这实际上是您的问题，那么解决方案是将格式选项更改为：

{
  style: "decimal",
  currency: "PHP",
  minimumFractionDigits: 0
}

然后你会得到1,234而不是PHP 1,234.00.

更新：我相信，当您到达 1234 时，您描述的问题会发生，因为您将正在编辑的值设置为格式化值。你不应该那样做。格式化的值仅用于显示。

如果您想让用户在数字被格式化时感觉到他们正在输入，您可以执行以下操作：

隐藏输入演示

推荐阅读