Почему ошибка "Property or method «item_» is not defined" в компоненте возникает в одном из двух мест использования?

Question

[coderisimo]

Внимание , мистика ! Компонент используется в двух местах. Рендерится выпадающий список :

<select  class="form-control form-control-sm client-file"
                v-model="attachedFileType" id="file_type"
                name="file_type">
                     <option v-for="(item, index) in filesTypes" :value="item.id">
                           {{item.item_title}}
                    </option>
   </select>

и ошибка :

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

массив filesTypes из которого берется item имеется :

Vue.component('pdf-viewer-dialog', {
        props: ['file', 'clientId'],
        data: function () {
            return {
                componentHeight: '',
                modalId: '',
                pdfId: '',
                email_email: '',
                email_subject: '',
                email_text: '',
                attachedFileType: '',
                attachedFileDescription: '',
                filesTypes: <?= CommonHelper::getArrayArraysAsJsArray(\app\models\ClientFile::getTypes()); ?>
            }
        },

ладно бы все время была ошибка, ан нет. На тестовой странице (там простое приложение для тестирования) все ок, а на реальной (там много логики) - падает . Подскажите, какие могут быть здесь подводные камни? Как основное приложение может "испортить" компонент ? Куда копать ? В консоли ссылка на самое начало , что , конечно ОЧЕНЬ информативно.


Спасибо

Comments

[Алексей Ярков]

Что vue devtools говорят? filesTypes в data есть?

[coderisimo]

Алексей Ярков, конечно , есть

массив filesTypes из которого берется item имеется :

такое ощущение, что обращение к нему идет ДО момента , когда объект данных инициализируется.
сейчас я решил задачу "в лоб" . просто собрал этот список через PHP , но неприятно, что происходят необъяснимые вещи в той области, в которой я только начал ощущать определенную свободу, Б! ))

[coderisimo]

Алексей Ярков, опять же , в другом месте, где я разрабатывал и тестил сей компонент все ок. Там данные берутся точно так же.... Мне кажется тут влияет основное приложение, но не понимаю, как....

[Алексей Ярков]

Василий,

такое ощущение, что обращение к нему идет ДО момента , когда объект данных инициализируется.

В таком случае это гарантированно спасет:

<select class="form-control form-control-sm client-file"
    v-model="attachedFileType" id="file_type"
    name="file_type"
    v-if="filesTypes" <!-- ВОТ ЭТО -->
>
    <option v-for="(item, index) in filesTypes" :value="item.id" :key="item.id">
        {{item.item_title}}
    </option>
</select>

[coderisimo]

Алексей Ярков, )))) спасибо за идею.
Ну это же тоже костыль. Я в принципе хочу понять, что происходит. Почему в момент рендеринга filesTypes отсутсвует. Думаю, что возможно где-то ошибка в разметке, которая в одном месте оказывается не критичной, а другом да... Буду копать дальше. Надеюсь разберусь .

[Алексей Ярков]

Василий,

Ну это же тоже костыль

Как раз таки проверять существует ли свойство перед тем, как итерироваться по нему, это не костыль

[coderisimo]

Алексей Ярков,


Здесь имеется явный косяк. Если все протекает в штатном режиме , данные на момент рендеринга должны быть доступны, ибо сначала creating а затем mounting. В моем случае ИНОГДА почему-то не так.
Заставить работать эту штуку я могу и уже заставил , но мне важно разобраться, что происходит. Почему нарушен нормальный ход процесса.

Вам в любом случае спасибо. Вариант , конечно, юзабелен.

[Алексей Ярков]

Василий,

данные на момент рендеринга должны быть доступны, ибо сначала created а затем mounted

Ну в вопросе об этом ни слова )) Обычно такое бывает, когда пытаются асинхронно получить данные, но у вас вроде не тот случай.
А банальный console.log('created') и console.log('mounted') в соответствующих хуках что говорят?

[coderisimo]

Алексей Ярков, приложение стартует и при попытке смонтироваться падает. Я часа 4 разбирался что же не так )). В отладчике видно, что приложение ищет переменные объявленные в шаблоне компонента у себя... , причем даже , когда используется v-if, это уже за пределами добра и зла имхо.
Сегодня я аналогично воевал с компонентом, который прекрасно работал на тестовой странице. Думал, сейчас подключу на место и буду отдыхать. Однако... пришлось танцевать с бубном пол дня. Вылечилось изменением типа подключения шаблона. Раньше я использовал

<script type="text/x-template" id="simple-dictionary-dialog-template">

а теперь пишу еще страшнее :

//......
        mounted: function () {
            //  console.log('mounted comp');
        },

        created: function () {
            //  console.log('created comp');

        },

        template: `<?= $template ?>` 
//  $template получаю  ob_get_clean() , зато все на одной странице и html  полноценно форматируется и редактируется IDE
    });

в следующий раз, как не неприятна эта мысль , надо отказаться от сборки через PHP, а разбираться с вебпаками и прочими иже с ними херувимами.

Answer 1

[coderisimo]

Решение, может, кому пригодится

попробуйте использовать вместо :

<script type="text/x-template" id="simple-dictionary-dialog-template">

вот такое подключение шаблона :
template: `здесь тело шаблона`

я имею ввиду именно синтаксис с косыми кавычками.
это не слишком удобно, ибо IDE не работает с таким HTML адекватно. Но, можно использовать php переменную :

template: `<?= $template ?>` 
//  $template получаю  ob_get_clean() , зато все на одной странице и html  полноценно форматируется и редактируется IDE

или просто не использовать костыли , а собирать все сборщиками.