Почему на прод версии выдаёт ошибку?

Question

[sharpsss]

Всем привет, такая ошибка вылазит на проде (юзаю vue js 3 optional API/vite/laravel):

TypeError: Cannot read properties of undefined (reading 'data')
    at Proxy.handlePageClick (Teachers-4c31872b.js:92:39272)
    at ct (app-29959037.js:1:12272)
    at Re (app-29959037.js:1:12350)
    at HTMLUListElement.n (app-29959037.js:1:55825)

в dev режиме всё норм работало, эта ошибка не вылезала

Teacher.vue с пагинацией

<template>
  <paginate
              :page-count="page_num"
              prev-text="Предыдущая страница"
              next-text="Следующая страница"
              prev-link-class="custom-button"
              next-link-class="custom-button"
              @click="handlePageClick"
          ></paginate>
</template>
<script>
import Paginate from 'vuejs-paginate/src/components/Paginate.vue';
export default {
  components: {
    Multiselect,
    My_tiptap,
    My_multiselect,
    Popup,
      UTable,
    CustomFileInput,
      Paginate,
}}methods: {
 handlePageClick(event) {
                const buttonText = event.target.textContent;
            // target.__vueParentComponent.data.target.innerValue[0]
                if (buttonText === "Предыдущая страница") {
                    this.active_page--;
                    if(this.active_page <= 0){
                        this.active_page = 1;
                    }
                } else if (buttonText === "Следующая страница") {
                    this.active_page++;
                    if(this.active_page > this.page_num){
                        this.active_page = this.page_num;
                    }
                } else {
                    // Кликнули на другую страницу
                    this.active_page = parseInt(event.target.__vueParentComponent.data.innerValue);
                    // Ваш код для обработки нажатия на другую страницу
                }
            },
}
</script>

и можно ли как-то сразу их ловить в dev режиме ? чтобы не было потом никаких сюрпризов

Answer 1

[Aetae]

Ответ очевиден - не использовать недокументированные* свойства типа __vueParentComponent.:)

Раз ты используешь options api у тебя есть this.$parent для родительского компонента или ты можешь использовать ref для выбора конкретного.

Однако в любом случае обращение к родителю выглядит как говнокод. Пробрасывай значение в props из родителя и не городи огород.

* Работа в режиме разработки и в режиме продакшена очень сильно отличается. Даже если ты видишь какие-то свойства в консоли, то, если они не документированы, значит полагаться на то, что ни будут там всегда - ни в коем случае нельзя. Особенно на явно помеченные как внутренние через нижнее подчёркивание.