Component template should contain exactly one root element. If you are
using v-if on multiple elements, use v-else-if to chain them instead.
ERROR Failed to compile with 1 errors
error in ./src/App.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
</div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here's my export default
export default {
name: 'app',
firebase: {
books: booksRef
},
components: {
Hello
}
}
What part should I fix to remove the error?
Component template should contain exactly one root element.
<template>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</template>
this will be the fix
<template>
<div>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</div>
</template>
In your case
</div class="panel panel-default">
needs to be
<div class="panel panel-default">
Official Documentation
On the official documentation, about Conditional Rendering,
somewhat "multiple" root element could be used when using v-if and v-else combo.
<template v-if="true">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
Here is the fixed code :
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th> Title </th>
<th> Author</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
Related
here's my profile.js
profileContainer.innerHTML =
`
<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>
`
and this is my profile.html
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
</section>
</div>
</div>
<!-- end row -->
</main>
This is the expected output:
profile
I tried changing the background color of the profile from gray to another color, but targeting the profileContainer through style.css only changes color of the outer border.. please help
if you want to update the whole page i.e overwrite the whole html code you need to add a button that initiates the page update event or you wont see any user interaction .
under tag add a button
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
<button onclick="myfunction()">click me</button>
</section>
</div>
</div>
<!-- end row -->
</main>
your JS code should be updated as
function myfunction() {
document.getElementById("profileContainer").innerHTML="<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>" ; }
You can target classes or IDs specified within JS the same way you would any other HTML. Depending on the specific element on the page you're trying to style, you could try targeting .jumbotron
Without seeing what CSS already exists to know what elements styling is currently being applied to (i.e., which class the gray background and border radius are actually tied to), it's hard to provide specifics.
What basically we do is that we provide an id or class to the element. Try to do that and then code the css in the stylesheet. This is the easy and foremost way to get out of this rid.
You can select the HTML element that you want to change by giving it an ID and select by using the JavaScript property which is getelementbyid, and changing its inner HTML by using the innerhtml property.
I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE
Using Aurelia, I have the following model:
export class Services {
heading = 'Services';
services = [
{ 'name': 'Test Service', 'instances': [{'uri': 'test_uri'}]},
{ 'name': 'Another Service', 'instances': [{'uri': 'other_uri'}, {uri: 'backup_uri'}]}
];
}
and the following view:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>${heading}</h2>
</div>
</div>
<div class="row" repeat.for="service of services">
<div class="panel panel-default">
<div class="panel-heading">${service.name}</div>
<table class="table">
<thead>
<tr>
<th>URI</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
</table>
</div>
</div>
</div>
</template>
The outer repeat.for seems to work correctly and ${service.name} is replaced with the .name property from the model. However, ${instance.uri} does not give any output. If I replace ${instance.uri} with ${service.instances[0].uri} I do get the output expected.
In addition, I expect the second repeat of service of services to generate two lines in the table body, but it generates only one.
I've tried replacing <div repeat.for="instance of service.instances"> with <div repeat.for="instance of $parent.instances"> with the same unsatisfactory result.
What do I need to change to ensure that the inner repeat works correctly?
Browsers do not allow divs in tables.
change this:
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
to this:
<tbody>
<tr repeat.for="instance of service.instances">
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</tbody>
I trying to filter an ng-repeat view of multiple item titles wrapped in hyperlinks but am getting results based on the Title and the URL string value.
How can I limit my filter to only the text of the Title and omit positives in the URL? E.g. If I search for "email" I would get results for items that have "email" in their title or text body but I would also get results that have "email" in their URL string.
Search Google for email<p>Blah blah blah</p>
Any help is greatly appreciated!
<div ng-app="Home">
<div ng-controller="Details">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4">
<div class="searchBox">
<input type="search" ng-model="search"/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" ng-repeat="SectionItem in Sections" ng-init="filterResult=[]" ng-hide="filterResult[$parent.$index].length <= 0">
<div class="panel panel-default">
<div class="panel-body">
<div>
<h1>{{SectionItem.Title}}</h1>
</div>
<div>
<!-- BEGIN: items belonging to this section -->
<table class="table table-condensed table-hover">
<tr ng-repeat="item in (filterResult[$parent.$index] = (SectionItems | filter:search | filterByMatchingSection:SectionItem.Title)) ">
<td>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" ng-show="item.Title != null">
{{item.Title}}
<p>
{{item.TextBody}}
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- END: items belonging to this section -->
</div>
</div>
</div>
</div>
</div>
</div>
This should do the trick
<input type="search" ng-model="search.Title"/>
According to the docs you can use a pattern object expression. For your case this should work:
... | filter: { title: search } | ...
This will search only in the title property.
i have written one html file and corresponding controller logic for this page i am getting data in console but that data is not showing in my UI
<div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController">
<div class="panel-heading">Enter Notice here</div>
<div class="panel-body">
<tabset>
<!-- SECOND TAB -->
<tab heading="Notice List">
<div class="panel panel-default" ng-controller="NoticeController " >
<div class="panel-body">
Displaying all notices. {{ gradeFilter }} {{ sectionFilter }}
<div class="row">
<div class="col-md-12">
<div class="box-placeholder">
<!-- START DATATABLE 1 -->
<div class="panel panel-default {{ dataLoad }}">
<div class="panel-heading">
<a ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv" class="pull-right btn btn-sm btn-info">Export to CSV</a>
<div ng-if="gradeFilter" class="panel-title">Classes</div>
</div>
<div class="table-responsive ">
<table ng-table="table.tableParams" export-csv="csv" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="g in $data ">
<td data-title ="'Topic'" align="center" >{{g.noticeId}}</td>
<td data-title ="'Message'" align="center" >{{g.message}}</td>
<td data-title ="'Sender'" align="center" >{{ g.senderName }} </td>
<td data-title ="'Date'" align="center" >{{ g.date | cmdate:'dd-MMM-yyyy' }}</td>
<td align="center"><a ui-sref="admin.viewEditnotice({nid : g.noticeId})">View </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my controller file
enter code here/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
console.log('Notice loaded');
App.controller('NoticeController', ["$scope","$http","$stateParams","Notice","toaster","APISource",function($scope,$http,$stateParams,Notice,toaster,APISource) {
'use strict';
$http.get(APISource.currentApiPoint+"/app/notice")
.success(function(data){
console.log(JSON.stringify(data))
})
.error(function(data)
{
});
Define your data as, $scope.mydata = data and then in ng-repeat use, g in mydata
Set your AJAX response to controller model like this:
$scope.$data = data