libphonenumber-js: 'Uncaught TypeError: текст для разбора должен быть строкой' - PullRequest
Новая
       30

libphonenumber-js: 'Uncaught TypeError: текст для разбора должен быть строкой'

0 голосов
/ 31 марта 2019

Я хочу использовать пакет libphonenumber-js (https://www.npmjs.com/package/libphonenumber-js) с Vuejs, но у меня есть проблема, которую я не понимаю.

Я импортирую пакет: 

import { parsePhoneNumberFromString } from 'libphonenumber-js';

Vue.use(parsePhoneNumberFromString);

И в моем компоненте я пытаюсь отформатировать номер телефона пользователя следующим образом: 

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;

Как и в документации, у меня все еще есть ошибка.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Копаем файлы плагинов здесь: 

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

кажется, что вы передаете весь контекст Vue в качестве первого параметра вместо строки.

Удаление Vue.use(parsePhoneNumberFromString) из вашего main.js должноисправить проблему.

0 голосов
/ 31 марта 2019

Вот проблема:

Измените {{phoneNumberFormatting}} на {{phoneNumberFormatting()}}

...