Почему я вижу Vue предупреждение: "Свойство или метод" msg "не определен в экземпляре, но на него ссылаются во время рендеринга ..." - PullRequest
Новая
       3

Почему я вижу Vue предупреждение: "Свойство или метод" msg "не определен в экземпляре, но на него ссылаются во время рендеринга ..."

1 голос
/ 04 марта 2020

Ситуация выглядит очень простой, но причина мне совершенно не ясна. Я пытаюсь реализовать один Vue компонент для проекта с унаследованным кодом с использованием ES5. Библиотека Vue имеет размер 2,6х (также пробовал 2,5х).

У меня есть следующий компонент Vue: 

window.StoragesPage = Vue.extend({
  name: MyConsts.COMP_STORAGES_PAGE,

  template: '#storages-page-template',

  data: function () {
    return {
      msg: 'aaaaaaaaaa',
      instGid: '',
      instDomain: ''
    };
  },
});

, он имеет следующий шаблон: 

<script type="x-template" id="storages-page-template">
    <div> {{ msg  }} </div>
</script>

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

Vue.component(MyConsts.COMP_STORAGES_PAGE, window.StoragesPage);

// Init vue root instance
new Vue({
  el: '#my-app'
});

и разметка для экземпляра Vue root выглядит следующим образом: 

<div id="my-app">
    <storages-page></storages-page>
</div>

и моя константа с компонентом имя выглядит так: 

...
  COMP_STORAGES_PAGE: 'storages-page',
...

Наконец-то у меня есть Vue предупреждение:

vue -2x. js: 634 [Vue warn]: свойство или метод "msg" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring -Reactive-Properties . (находится в Root)

Вопрос:

  • Почему я вообще вижу это предупреждение?

  • Почему он содержит «найдено в Root», но элемент данных «msg» на самом деле находится внутри моего Vue root дочернего компонента?

  • Почему после этого я вижу правильно отрендеренная страница с ожидаемым выводом "aaaaaa"?

PS: Я также дважды проверил, что на страницу включена только одна библиотека Vue.

1 Ответ

1 голос
/ 04 марта 2020

Хорошо, похоже, что я нашел причину этого странного поведения, после тщательной проверки Vue процесса создания экземпляра в Chrome отладчике. Я обнаружил, что мой дочерний Vue шаблон компонента отображен внутри Vue контейнера приложения <div> тег как этот: 

<div id="my-app">
    <storages-page></storages-page>
    <?= $childrenTemplates ?> // <--- this one
</div>

К сожалению, я пропустил эту строку кода в описании вопроса, думая, что это не так важно. Вот почему компонент Vue root, упомянутый в предупреждении. Чтобы исправить это, я просто переместил вывод шаблонов дочерних компонентов ниже закрывающего тега </div>: 

<div id="my-app">
    <storages-page></storages-page>
</div>
<?= $childrenTemplates ?>
...