libphonenumber-js: 'Uncaught TypeError: A text for parsing must be a string'

Question

我想在 Vuejs 中使用 libphonenumber-js 包 (https://www.npmjs.com/package/libphonenumber-js)，但我遇到了一个我不明白的问题。

我导入包：

import { parsePhoneNumberFromString } from 'libphonenumber-js';

Vue.use(parsePhoneNumberFromString);

并且在我的组件中，我尝试使用以下计算来格式化用户的 phone 号码：

phoneNumberFormatting: function() {
  const rawPhoneNumber = parsePhoneNumberFromString(this.phoneNumber);
  return rawPhoneNumber;
}

phoneNumber 在这里：

function defaultData() {
  return {
    open:            false,
    maxLength:       25,
    playlisName:     '',
    loader:          false,
    userCreated:     false,
    step:            'login',
    phoneNumber:     '',
    formattedNumber: ''
  }
}

目前，我只想显示格式化的数字：

              <div class="input-group">
              <input v-model="phoneNumber" id="phoneNumber" placeholder="+33 (0) 123456789" class="form-control">
                <div class="input-group-append">
                  <span class="input-group-text">{{phoneNumberFormatting}}</span>
                </div>
              </div>

但是在我的 javascript 控制台中，我有一个错误：

Uncaught TypeError: A text for parsing must be a string.

这是 parsePhoneNumber.js 中的问题所在：

export function normalizeArguments(args) {
    var _Array$prototype$slic = Array.prototype.slice.call(args),
        _Array$prototype$slic2 = _slicedToArray(_Array$prototype$slic, 4),
        arg_1 = _Array$prototype$slic2[0],
        arg_2 = _Array$prototype$slic2[1],
        arg_3 = _Array$prototype$slic2[2],
        arg_4 = _Array$prototype$slic2[3];

    var text = void 0;
    var options = void 0;
    var metadata = void 0;

    // If the phone number is passed as a string.
    // `parsePhoneNumber('88005553535', ...)`.
    if (typeof arg_1 === 'string') {
        text = arg_1;
    } else throw new TypeError('A text for parsing must be a string.');

    // If "default country" argument is being passed then move it to `options`.
    // `parsePhoneNumber('88005553535', 'RU', [options], metadata)`.
    if (!arg_2 || typeof arg_2 === 'string') {
        if (arg_4) {
            options = arg_3;
            metadata = arg_4;
        } else {
            options = undefined;
            metadata = arg_3;
        }

        if (arg_2) {
            options = _extends({ defaultCountry: arg_2 }, options);
        }
    }
    // `defaultCountry` is not passed.
    // Example: `parsePhoneNumber('+78005553535', [options], metadata)`.
    else if (isObject(arg_2)) {
            if (arg_3) {
                options = arg_2;
                metadata = arg_3;
            } else {
                metadata = arg_2;
            }
        } else throw new Error('Invalid second argument: ' + arg_2);

    return {
        text: text,
        options: options,
        metadata: metadata
    };
}

所以在这里：

    // If the phone number is passed as a string.
    // `parsePhoneNumber('88005553535', ...)`.
    if (typeof arg_1 === 'string') {
        text = arg_1;
    } else throw new TypeError('A text for parsing must be a string.');

我不明白，因为即使我替换

const rawPhoneNumber = parsePhoneNumberFromString(this.phoneNumber);
return rawPhoneNumber;

来自

const rawPhoneNumber = parsePhoneNumberFromString('+12133734253')
return rawPhoneNumber.number;

与文档中一样，我仍然遇到错误。

有什么想法吗？

Answer 1

这是问题所在：

将{{phoneNumberFormatting}}改为{{phoneNumberFormatting()}}

Answer 2

在这里深入了解插件文件：

export function parsePhoneNumberFromString()
{
  var parameters = Array.prototype.slice.call(arguments)
  parameters.push(metadata)
  console.log(parameters) //<= here
  return parsePhoneNumberFromStringCustom.apply(this, parameters)
}

您似乎将所有 Vue 上下文作为第一个参数而不是字符串传递。

从您的 main.js 中删除 Vue.use(parsePhoneNumberFromString) 应该可以解决问题。

libphonenumber-js: 'Uncaught TypeError: A text for parsing must be a string'

libphonenumber-js: 'Uncaught TypeError: A text for parsing must be a string'

javascript

vue.js

libphonenumber