Почему в параметр функции компонента Vue 3 прилетает undefined?

Question

[TuMko]

Добрый день. Есть компонент Vue. В переменную certificate получаем массив данных с сервера. Полученные определенные поля certificate необходимо преобразовать (в строках оставить только цифры). Для этого написана функция shortingTechItems. Когда в нее закидываю значение certificate.pto, выдает ошибку "Cannot read properties of undefined (reading 'map')", т.е. в самой функции в item прилетает undefined. В другом подобном компоненте такая же функция срабатывает без ошибок (возможно дело в объеме полученных данных с API, в другом компоненте их меньше, поэтому быстрее загружаются). В чем проблема и как исправить?

<td class="border w-50 px-2 text-center">
   {{ shortingTechItems(certificate.pto) }}
</td>

export default {
  setup() {
    const route = useRoute();
    const store = useStore();
    const certificate = ref({});

    onMounted(async () => {
      certificate.value = await store.dispatch(
        "certificate/loadById",
        route.params.id
      );
    });

    const shortingTechItems = (item) => {
      const arr = [];
      item.map((i) => {
        arr.push(Number(i.replace(/\D+/g, "")));
      });
      return arr;
    };

    return {
      certificate,
      shortingTechItems,
    };
  },
};

Answer 1

[Tash1moto]

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

<td v-if="certificate.pto" class="border w-50 px-2 text-center">
   {{ shortingTechItems(certificate.pto) }}
</td>

Answer 2

[0xD34F]

const certificate = ref({});

shortingTechItems(certificate.pto)

прилетает undefined

Вот это на хрен неожиданность - пытаемся прочитать из объекта значение несуществующего свойства и получаем... получаем... А-а-а-а-а-а!!!!!!111

В чем проблема

В нулевых знаниях js.

как исправить?

Вообще - освоить js.

Ну а прямо сейчас можете задать для передаваемого в функцию свойства дефолтное значение в виде пустого массива. Или можете проверять внутри функции, что пришло, если не массив - не пытаться пользоваться этой штукой как массивом. Или можете не рендерить элемент, по данных нет.

UPD. Обязательно тратить семь строк на то, что можно сделать в одну?

- const shortingTechItems = (item) => {
-   const arr = [];
-   item.map((i) => {
-     arr.push(Number(i.replace(/\D+/g, "")));
-   });
-   return arr;
- };
+ const shortingTechItems = items => items.map(n => +n.replace(/\D/g, ''));