如何用解析值覆盖输入字段？答案

【问题标题】：How do I overwrite inputfields with parsed value?如何用解析值覆盖输入字段？
【发布时间】：2019-02-13 09:43:46
【问题描述】：

我正在尝试限制数字类型输入字段中允许的字符集。问题是我找不到“覆盖”输入字段中的文本以删除无效字符的方法。

这是我测试的代码：

<template>
  <div>
    <input @input="validate" :model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      message: ""
    }),
    methods: {
      validate(input){
        // the regex is allowing only numbers and either a comma or a period
        this.message = input.target.value.match(/[0-9]*(,|\.)?[0-9]*/gm)[0]
      }
    }
  }
</script>

输入字段中的所有字符保持不变，而“消息”变量是已解析的验证字符串。如何将“消息”字符串放入输入字段？

编辑：这是上面代码的jsfiddle。

【问题讨论】：

标签： javascript html vue.js input

【解决方案1】：

好吧，:model 是 v-bind:model 的简写，不要与 Vue 指令的 v-model 混淆（我们想要这个）。这样做：

<input @input="validate" v-model="message" placeholder="edit me">

但是，我建议为此使用Vue-Masked-Input 组件或vue-inputmask（我的个人偏好），因为它们通过确保预定义格式来帮助输入。这对于日期、数字、电话号码等很有用。

【讨论】：

【解决方案2】：

vuejs 中有一个名为 watch 的方法，可以让你监视 DOM 的变化。 :model 也不是 v-model 的简写。

:model = v-bind:model

这是一个工作示例的 jsfiddle。 https://jsfiddle.net/awk7g2un/

只需将我的数据替换为您的解析值

【讨论】：