Vue.js信用卡号码格式化功能失效问题求助

我来帮你梳理下这个功能失效的问题，主要是原方法存在逻辑漏洞，再加上可能缺少正确的触发时机导致的，一步步来修复：

1. 原方法的核心问题 #

你的_formatCreditCard方法有两个关键缺陷：

• 正则表达式/.{1,4}/g会匹配所有字符（包括空格、横线等非数字符号），如果用户输入过程中不小心输入了非数字，会直接导致分组混乱，格式化结果出错。
• else return ''的逻辑只返回空值，但没有对this.credit_card_number进行赋值，当卡号为空或无法匹配时，原数据不会被更新，视图也不会同步变化。

2. 修复后的格式化方法 #

先过滤掉所有非数字字符，再进行分组格式化，同时统一处理赋值逻辑：

_formatCreditCard: function() {
  // 第一步：过滤掉所有非数字字符，只保留纯卡号
  const cleanCardNumber = this.credit_card_number.replace(/\D/g, '');
  // 第二步：每4位分割成数组
  const numberChunks = cleanCardNumber.match(/.{1,4}/g);
  // 第三步：将数组拼接成带空格的格式，空值则赋值为空字符串
  this.credit_card_number = numberChunks ? numberChunks.join(' ') : '';
}

3. 确保方法被正确触发 #

格式化方法需要在信用卡号变化时自动调用，你可以通过两种方式实现：

方式一：绑定input事件到输入框 #

在你的模板中，给信用卡输入框添加@input事件，实时触发格式化：

<input 
  v-model="credit_card_number" 
  @input="_formatCreditCard" 
  placeholder="请输入信用卡号"
>

方式二：使用Vue的watch监听数据变化 #

在组件的watch选项中监听卡号的变化，自动触发格式化：

Vue.component('payment-methods', {
  data() {
    return {
      credit_card_number: '',
      selectedPaymentMethod: ''
    }
  },
  watch: {
    credit_card_number() {
      this._formatCreditCard();
    }
  },
  methods: {
    _formatCreditCard: function() {
      const cleanCardNumber = this.credit_card_number.replace(/\D/g, '');
      const numberChunks = cleanCardNumber.match(/.{1,4}/g);
      this.credit_card_number = numberChunks ? numberChunks.join(' ') : '';
    }
  },
  template: `
    <div>
      <div class="radio col-12">
        <label>
          <input type="radio" name="payment" value="credit-card" v-model="selectedPaymentMethod">
          信用卡支付
        </label>
        <input 
          v-if="selectedPaymentMethod === 'credit-card'"
          v-model="credit_card_number" 
          @input="_formatCreditCard" 
          placeholder="请输入16位信用卡号"
        >
      </div>
    </div>
  `
});

4. 额外注意事项 #

• 确保credit_card_number在组件的data选项中声明，否则Vue无法监听其变化，视图也不会同步更新。
• 如果需要限制用户输入非数字字符，可以在输入框添加@keydown事件过滤，或者使用type="tel"配合pattern属性增强输入体验。

内容的提问来源于stack exchange，提问作者RichardMiracles