Level 23
Show code
May 27, 2018
7
Level 1
[Vue warn]: Error compiling template? everything works find but showing this error in console
I am using Vue js its working fine It showing error in the console
Level 50
You should have only one root element in each component. So just pack everything in a div.
<template>
<div>
<p>your code inside div tag</p>
<strong>continue writing your code inside div</strong>
</div>
</template>
Level 1
This is my code
<template>
<div>
<table class="table table-bordered table-striped table-hover" id="table2">
<thead>
<tr>
<th>Id</th>
<th>User Name</th>
<th>Company Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="(cmpdata, index) in filteredPosts" :key='index'>
<td>{{ index + 1 }}</td>
<td>{{ cmpdata.name }}</td>
<td>{{ cmpdata.company_name }}</td>
<td>{{ cmpdata.email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
Level 50
click to that error in console and see what's exactly wrong
Level 1
Here is console
app.js:33121 [Vue warn]: Error compiling template:
<div id="app">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="../../index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>PF</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Pocket</b>Film</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">Admin</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
</p>
</li>
<!-- Menu Body -->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="http://localhost/pocket_Film/logout" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<div id="loader_show" class="loader_Wrap text-center" hidden=""><div class="loader_sqr">
<img src="http://localhost/pocket_Film/public/img/loading.gif">
</div></div>
<style>
.loader_sqr {
position: relative;
background-color: rgba(255,255,255,06);
display: inline-block;
top:50%;
width: 80px;
height: 80px;
padding-top: 22px;
border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
box-shadow:0px 0px 7px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 0px 7px 1px rgba(0,0,0,0.3);
-ms-box-shadow:0px 0px 7px 1px rgba(0,0,0,0.3);
-o-box-shadow:0px 0px 7px 1px rgba(0,0,0,0.3);
}
.loader_Wrap {
position: fixed;
top: 0;
height: 100%;
width: 100%;
z-index: 9996;
left: 0;
background-color: rgba(0,0,0,0.2);
}
</style> <!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active">
<a href="http://localhost/pocket_Film/admin">
<i class="fa fa-users"></i> <span>Manage Admins</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/users">
<i class="fa fa-user"></i> <span>Manage Users</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/film">
<i class="fa fa-film"></i> <span>Manage Films</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/company">
<i class="fa fa-building-o"></i> <span>Manage Company</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/events">
<i class="fa fa-calendar"></i> <span>Manage Events</span>
</a>
</li>
<li class=" treeview ">
<a href="#">
<i class="fa fa-play-circle"></i> <span>Managed Play</span>
<span class="pull-right-container"></span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="http://localhost/pocket_Film/play">
<i class="fa fa-home"></i>
<span> Home</span>
</a>
</li>
</ul>
</li>
<li class=" treeview ">
<a href="#">
<i class="fa fa-edit"></i> <span>Managed Distribution</span>
<span class="pull-right-container"></span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="http://localhost/pocket_Film/dist">
<i class="fa fa-circle-o"></i>
<span> New Entry</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film">
<i class="fa fa-circle-o"></i>
<span>In Assessment</span>
</a>
</li>
</ul>
</li>
<li class=" treeview ">
<a href="#">
<i class="fa fa-edit"></i> <span>Masters</span>
<span class="pull-right-container"></span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="http://localhost/pocket_Film/aspect_ratios">
<i class="fa fa-circle-o"></i>
<span> Aspect Ratio</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/distribution">
<i class="fa fa-circle-o"></i>
<span> Distribution</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/event_themes">
<i class="fa fa-circle-o"></i>
<span> Event Themes</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/genres">
<i class="fa fa-circle-o"></i>
<span>Genres</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/social">
<i class="fa fa-circle-o"></i>
<span>Social</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/categories">
<i class="fa fa-circle-o"></i>
<span>Categories</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/award_categories">
<i class="fa fa-circle-o"></i>
<span>Award Categories</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/countries">
<i class="fa fa-circle-o"></i>
<span>Countries</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/languages">
<i class="fa fa-circle-o"></i>
<span>Language</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/roles">
<i class="fa fa-circle-o"></i>
<span>Roles</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/self_sensors">
<i class="fa fa-circle-o"></i>
<span>Self Sensors</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/shooting_formats">
<i class="fa fa-circle-o"></i>
<span>Shooting Format</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/cities">
<i class="fa fa-circle-o"></i>
<span>City</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/states">
<i class="fa fa-circle-o"></i>
<span>State</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/skills">
<i class="fa fa-circle-o"></i>
<span>Skills</span>
</a>
</li>
</ul>
</li>
<li class=" treeview ">
<a href="#">
<i class="fa fa-key"></i> <span>Permission Settings</span>
<span class="pull-right-container"></span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="">
<a href="http://localhost/pocket_Film/controller_names">
<i class="fa fa-circle-o"></i>
<span>Module</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/controller_actions">
<i class="fa fa-circle-o"></i>
<span>Actions</span>
</a>
</li>
<li class="">
<a href="http://localhost/pocket_Film/controller_permissions">
<i class="fa fa-circle-o"></i>
<span>Permissions</span>
</a>
</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
</section>
<section class="content">
<div class="box box-default ">
<div class="box-header with-border">
<h3 class="box-title">Admin Users</h3>
<div class="pull-right">
<a href="http://localhost/pocket_Film/admin/create" class="btn btn-primary btn-sm">
<i class="fa fa-plus"></i> Admin
</a>
</div>
</div>
<div class="box-body">
<div class="col-md-12">
<form method="post" action="http://localhost/pocket_Film/admin/filter" id="search-form" class="form-inline" role="form">
<input type="hidden" name="_token" value="UekOFTb7hMKGD4uc93X1Iwdv93QvhbZeTcJEKY9q">
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control" id="search_text" value="" name="search_text" placeholder="Search by name">
</div>
<div class="col-md-4">
<button class="btn btn-primary table-group-action-submit" name="search">
Search</button>
<button class="btn btn-primary table-group-action-submit" name="clear">
Clear</button>
</div>
</div>
</form>
</div>
<div class="col-md-12">
<table id="table" class="display table table-bordered table-striped table-hover" border="1">
<thead>
<tr>
<th>Sr.No</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Status</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Somnath</td>
<td>[email protected]</td>
<td>9552166844</td>
<td>Active</td>
<td>2018-04-19 05:51:05</td>
<td>
<a href="http://localhost/pocket_Film/admin/1/edit" title="Edit" type="button" data-toggle="tooltip"><i class="fa fa-edit" style="font-size:16px"></i></a>
<a href="http://localhost/pocket_Film/admin/activate/1/0" title="Deactivate" data-toggle="tooltip" onclick="return confirm('Are you sure you want to deactivate this?');" type="button"><i class="fa fa-times" style="font-size:16px"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>Pritesh Bhole</td>
<td>[email protected]</td>
<td></td>
<td>Active</td>
<td>2018-04-19 06:24:18</td>
<td>
<a href="http://localhost/pocket_Film/admin/2/edit" title="Edit" type="button" data-toggle="tooltip"><i class="fa fa-edit" style="font-size:16px"></i></a>
<a href="http://localhost/pocket_Film/admin/activate/2/0" title="Deactivate" data-toggle="tooltip" onclick="return confirm('Are you sure you want to deactivate this?');" type="button"><i class="fa fa-times" style="font-size:16px"></i></a>
</td>
</tr>
<tr>
<td>3</td>
<td>Vicky Jagtap</td>
<td>[email protected]</td>
<td>8830979633</td>
<td>Active</td>
<td>2018-04-19 12:45:00</td>
<td>
<a href="http://localhost/pocket_Film/admin/3/edit" title="Edit" type="button" data-toggle="tooltip"><i class="fa fa-edit" style="font-size:16px"></i></a>
<a href="http://localhost/pocket_Film/admin/activate/3/0" title="Deactivate" data-toggle="tooltip" onclick="return confirm('Are you sure you want to deactivate this?');" type="button"><i class="fa fa-times" style="font-size:16px"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<strong>Copyright © <a href="">Aquil Software</a>.</strong> All rights
reserved.
</footer>
</div>
</div>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
(found in <Root>)
warn @ app.js:33121
compileToFunctions @ app.js:43259
Vue.$mount @ app.js:43449
Vue._init @ app.js:37168
Vue @ app.js:37257
_typeof @ app.js:1269
__webpack_require__ @ app.js:20
Object.defineProperty.value @ app.js:1221
__webpack_require__ @ app.js:20
(anonymous) @ app.js:63
(anonymous) @ app.js:66
Level 1
Problem resolved, It was the problem of stylesheet location
1 like
Level 50
mark discussion as solved. error tells you from console what was the problem
Please or to participate in this conversation.