Cannot read property 'panel' of undefined

Questions
1

:one: app.f7.html :page_facing_up:

<template>
<div id="app">
{{#if isLoggedIn}}
 <div class="panel panel-left panel-cover panel-resizable panel-init">
   <div class="page">
        <div class="page-content color-panel">
          <div class="block-user padding-bottom-half">
            <div class="list media-list no-harilines-between">
              <ul>
                <li style="background: #efeff4;">
                  <div class="item-content">
                   <div class="item-media user-media">
                 <img src="./static/image.png" width="200" class="lazy lazy-fade-in">
               </div>
             </div>
           </li>
         </ul>
       </div>
     </div>
     <div class="list links-list accordion-list no-margin">
       <ul class="color-panel">
         <li class="accordion-nav no-chevron">
           <a href="/Login/" class="item-content panel-close">
             <div class="item-media">
               <i class="material-icons color-expense">power_settings_new</i>
             </div>
             <div class="item-inner no-margin" id="userLoggedOut">
               <div class="item-title">Log Out</div>
             </div>
           </a>
         </li>
       </ul>
     </div>
   </div>
 </div>
</div>
<div class="view view-main view-init safe-areas" id="view-main" data-url="/Home/"></div>
{{else}}
   <div class="view view-init" id="view-auth" data-url="/Login/"></div>
{{/if}}
</div>
</template>

:two: home.f7.html :page_facing_up:

<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
 <div class="navbar-bg"></div>
 <div class="navbar-inner sliding">
   <div class="left">
     <a href="#" data-panel="left" class="link icon-only panel-open panel-resizable">
       <i class="icon material-icons color-white">menu</i>
     </a>
   </div>
   <div class="title">App name</div>
 </div>
</div>
<div class="page-content">
</div>
</div>
</template>

:three: Issue =>

a. sometime panel works and opens from left (on devtools & device)
b. sometime gives this error as this topics title (on devtools & device)

1 Like
2

setup panel model manual under ‘page:init’
sth like:
var self = this;
app.panel.create(parameters)…

option2: use router panel

3

i have same problem like this but in vue, sometimes works, but after i make some changes, the problem occurs, and then i refresh the whole page and its works again but error return if i change somthing, idk is this the webpack hot-module error or my code,

4

:one: We should add panels’ HTML right in the beginning of the app root element

5

indeed,
so i just try again like this :
make some changes => have errors => fix it => undefined problems occurs
make some changes => no errors => undefined problems doesnt occurs

maybe in my case the hot-module