Develop Reference

vue.js - Is there any way to render elements in two different divs using one v-for loop?

The goal is to make the output look like this:
<div id="tabs">
<div id="first">
<a>tab 1</a>
<a>tab 2</a>
</div>
<div id="second">
<a>tab 3</a>
</div>
</div>
Currently I'm using this solution (using two v-for loops):
tabs.js (current)
export default {
data() {
return {
tabs: {
first: [{ name: 'tab1' }, { name: 'tab2' }],
second: [{ name: 'tab3' }],
}
}
}
template: `
<div id="tabs">
<div id="first">
<a v-for="tab in tabs.first">{{ tab.name }}</a>
</div>
<div id="second">
<a v-for="tab in tabs.second">{{ tab.name }}</a>
</div>
</div>
`
}
I had an idea to do something like this but it performs more iterations than in the case with two loops:
tabs.js (idea)
export default {
data() {
return {
tabs: {
test: [
{ name: 'tab1', category: 'first' },
{ name: 'tab2', category: 'first' },
{ name: 'tab3', category: 'second' }
]
}
}
}
template: `
<div id="tabs">
<div v-for='category in ["first", "second"]' :id='category' :key='category'>
<template v-for="tab in tabs.test">
<a v-if="tab.category === category">{{ tab.name }}</a>
</template>
</div>
</div>
`
}
I read this topic but it contains slightly different solutions, which unfortunately didn't work in this case.

There's no problem using more than one v-for loops. And there's no problem using nested v-for loops.
The problem I see with your current code is that it's not scalable. You're hard-coding the exact values of your tabs in <template />(e.g: first, second).
The main idea here is to loop through tabs and, inside each tab, to loop through each contents, without the <template> needing to know what the tab is or how many there are.
So that when you change your tabs to, say...
{
tab1: [{ name: 'intro'}],
tab2: [{ name: 'tab2-1' }, { name: 'tab2-2' }],
tab3: [{ name: 'tab3' }]
}
template still works, without needing any change.
To achieve this type of flexibility, you need to use a nested v-for loop:
<div id="tabs">
<div v-for="(items, name) in tabs" :key="name" :id="name">
<a v-for="(item, key) in items" :key="key" v-text="item.name"></a>
</div>
</div>
Demo:
new Vue({
el: '#app',
data: () => ({
tabs: {
tab1: [{
name: 'intro'
}],
tab2: [{
name: 'tab2-1'
}, {
name: 'tab2-2'
}],
tab3: [{
name: 'tab3'
}]
}
})
})
#tabs a { padding: 3px 7px }
<script src="https://v2.vuejs.org/js/vue.min.js"></script>
<div id="app">
<div id="tabs">
<div v-for="(links, name) in tabs" :key="name" :id="name">
<a v-for="(link, key) in links"
:key="key"
:href="`#${link.name}`"
v-text="link.name"></a>
</div>
</div>
</div>
But I'd take it one step further and change the tabs to be an array:
data: () => ({
tabs: [
[{ name: 'intro'}],
[{ name: 'tab1' }, { name: 'tab2' }],
[{ name: 'tab3' }]
]
})
And use :id="'tab-' + name" on tab divs if you really need those unique ids. (Hint: you don't).
It makes more sense to me.

I did not see any harm in using two v-for (one for the object keys and another for the array elements) as far as it is all dynamic. You can give a try to this solution by using of Object.keys() :
new Vue({
el: '#app',
data: {
tabs: {
first: [{ name: 'tab1' }, { name: 'tab2' }],
second: [{ name: 'tab3' }],
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="tabs">
<div v-for="tab in Object.keys(tabs)" :key="tab" :id="tab">
<a v-for="tab in tabs[tab]">{{ tab.name }}</a>
</div>
</div>
</div>

You could add a computed property being the .concat from both and loop for it
export default {
data() {
tabs: {
first: [{ name: 'tab1' }, { name: 'tab2' }],
second: [{ name: 'tab3' }],
}
},
computed: {
tabsCombined () {
return this.tabs.first.concat(this.tabs.second)
}
},
template: `
<div id="tabs">
<div v-for='category in tabsCombined' :id='category' :key='category'>
<template v-for="tab in tabs.test">
<a v-if='tab.category === category>{{ tab.name }}</a>
</template>
</div>
</div>
`
}

Fullscreen bootstrap 4 card with highcharts

I have several (bootstrap) cards where I would like to have the opportunity to show this fullscreen. Highcharts charts are present in these cards. The problem is that the height of the highcharts does not adapt when you are going in full screen mode.
A while ago I asked the same question with bootstrap panels and then "daniel_s" made this example for panels. Only now I have added a number of columns at the bottom and it has been converted from panels to cards. Unfortunately the example is not working anymore. Again "daniel_s" made an example but the height is still not 100%.
Is there a possibility to automatically adjust the scaling of the highcharts so that the ratio (columns at the bottom and header) remains the same as in this example?
In addition, I would also like to know how I get the header the text and icons on one line. So that the text is on the left and the icons are on the right.
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 1</h3>
<li class="list-inline-item"><i class="fas fa-expand"></i></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 2</h3>
<li class="list-inline-item"><i class="fas fa-expand"></i></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container2"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.panel-actions {
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color: #333;
}
#mainContainer {
height: 50%;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.full-height-row {
height: 100%;
width: 100%;
}
#container {
height: 100%;
}
#container2 {
height: 100%;
}
.row-200 {
height: 220px;
}
.card_border {
border: solid 0.75px #fa7921;
}
.card_border2 {
border: solid 2px #fa7921;
}
JavaScript
$(document).ready(function() {
var charts = [];
var chart1Info = {
containerId: "container",
definition: {
title: {
text: "Chart1 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
var chart2Info = {
containerId: "container2",
definition: {
title: {
text: "Chart2 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom"
}
}
}
]
};
if (chartInfo == chart1Info) {
charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
} else {
charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();
var $this = $(this);
$this
.children("i")
.toggleClass("fa-expand")
.toggleClass("fa-arrows-alt");
$(this)
.closest(".card")
.toggleClass("panel-fullscreen");
$($(this).parents()[3])
.find(".card-body")
.toggleClass("row-200");
var chartInfo =
$this.attr("id") === "panel-fullscreen" ? chart1Info : chart2Info;
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});
As can be seen in this example, the height is not 100%, while in this example the height is 100%. How do I manage that in the first example the height is always 100%.

I've examined both examples and probably found the solution.
In your working example, all the elements are located in one container panel which has a height set to 100% and child panel-heading of height 94%.
In your example with the issue, there is a 'card' with height set to 100% and child container-fluid with rows inside without a fixed height set.
So as you can see rows doesn't know how to share the space on the screen. To fix it you have to set the CSS styles so that container-fluid is 100% height and rows for example 10% top row, 80% middle row, 10% bottom row. Then all the elements are rendered correctly as you can see below:

Highchart as a modal

I am currently working on a webpage with highchart. I need to show the same highchart as a modal on click of a button. I am using html bootstrap and javascript
This is what I have done
<div class="container" id = "container1" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container2" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container3" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">click to zoom</button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal fade" role= "dialog" id = "myModal" style = "width: 50%; height: 70%; position: absolute; float: center">
</div>
JS:
$(document).ready(function() {
var title = {
text: 'Cycle Profile'
};
var subtitle = {
text: 'Source: cimtool'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
},
{
name: 'India',
data: [5.9, 2.2, 7.7, 6.5, 13.9, 13.2, 14.0,
14.6, 16.2, 8.3, 8.6, 6.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container1').highcharts(json);
$('#container2').highcharts(json);
$('#container3').highcharts(json);
$('#container6').highcharts(json);
$('#myModal').highcharts(json);
});

Please show us what you have tried and your sample code. Any how I have created a fiddle including bootstarp and jquery aswell.
Where you can see one button please click on that, it will open modal popup. That model contains high chart (basic line).
HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="container"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
JS :
$(document).ready(function(){
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
});
High chart as modal JS Fiddle

How to load Nested Arrays in Angular?

I have a codepen of some code I am playing with. I want to load the json data through a service and then use ng-repeat to load the arrays.
The problem is that it loads the first array just fine. However, the nested array "data.cities" doesn't show up. In the console, it states that its too much recursion. Here is the link and code below.
Codepen Link
html
<div ng-app="myApp" ng-controller="nameController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-repeat="r in data">
<div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div>
<div ng-repeat="city in data.cities">{{city.name}}</div>
<div>
</div>
</div>
</div>
</div>
</div>
JS
var app = angular.module("myApp", []);
app.controller("nameController", function($scope, mapService) {
$scope.data = mapService.mapData();
});
app.service("mapService", function() {
var mapInfo = [{
region: "America",
desc: "Some info about America",
x: 50,
y: 200,
cities: [{
name: "Chicago",
x: 20,
y: 232
}, {
name: "Los Angeles",
x: 52,
y: 124
}]
}, {
region: "Europe",
desc: "Some info about Europe",
x: 10,
y: 24,
cities: [{
name: "Chicago2",
x: 20,
y: 232
}, {
name: "Los Angeles2",
x: 52,
y: 124
}]
}, {
region: "China",
desc: "Some info about China",
x: 88,
y: 126,
cities: [{
name: "Chicago3",
x: 20,
y: 232
}, {
name: "Los Angeles3",
x: 52,
y: 124
}]
}];
this.mapData = function() {
/*angular.forEach(pics, function(value, key) {
//console.log("key", value.name);
return value.name;
});*/
return mapInfo;
};
});

update only this line
<div ng-repeat="city in r.cities">{{city.name}}</div>
http://jsfiddle.net/L01rjepb/

that's becuse citis is in r not in data
try like this
ng-repeat="city in r.cities"
CODEPEN

<div ng-repeat="city in r.cities">{{city.name}}</div> is what you need.
<div ng-app="myApp" ng-controller="nameController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-repeat="r in data">
<div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div>
<div ng-repeat="city in r.cities">{{city.name}}</div>
<div>
</div>
</div>
</div>
</div>
</div>

Change data.cities (original object)
<div ng-repeat="city in data.cities">{{city.name}}</div>
to r.cities (iterator item)
<div ng-repeat="city in r.cities">{{city.name}}</div>
http://codepen.io/anon/pen/dYWgXd

below sample might help you,
<table>
<tbody ng-repeat="row in rows">
<tr>
<th>{{row.name}}</th>
</tr>
<tr ng-repeat="sub in row.subrows">
<td>{{sub.name}}</td>
</tr>
</tbody>
</table>

What's the point of creating a directive in this angular.js example?

So I was following a tutorial on code academy on Angular.js. I understood every step and these are the final files which displays a simple game board. My question is: why did we need to go through the trouble of creating a directive called game and linking that to game.html for displaying the content? We already have the $scope given in the ScopeController file. Why couldn't we just go to the index.html file and just display using expressions with ng-repeat like this:
{{scope.visitor_score}}. So couldn't we have just done that all in the index.html file instead of making a directive?
index.html:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="GameboardApp">
<div class="header">
<h1 class="logo">GameBoard</h1>
</div>
<div class="main" ng-controller="ScoreController">
<div class="container">
<div class="row">
<game info="score" ng-repeat="score in scores"></game>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/ScoreController.js"></script>
<!-- Directives -->
<script src="js/directives/game.js"></script>
</body>
</html>
app.js:
var app = angular.module('GameboardApp',[]);
ScopeController.js
app.controller('ScoreController', ['$scope', function($scope) {
$scope.scores = [
{
datetime: 1420848000000,
visitor_team: {
city: "Charlotte",
name: "Hornets"
},
home_team: {
city: "New York",
name: "Knicks"
},
period: "Final",
visitor_score: 110,
home_score: 82
},
{
datetime: 1420848000000,
visitor_team: {
city: "Dallas",
name: "Mavericks"
},
home_team: {
city: "Los Angeles",
name: "Clippers"
},
period: "Final",
visitor_score: 100,
home_score: 120
},
{
datetime: 1420848000000,
visitor_team: {
city: "Brooklyn",
name: "Nets"
},
home_team: {
city: "Detroit",
name: "Pistons"
},
period: "Third Quarter",
visitor_score: 69,
home_score: 74
},
{
datetime: 1420848000000,
visitor_team: {
city: "Indiana",
name: "Pacers"
},
home_team: {
city: "Philadelphia",
name: "76ers"
},
period: "Third Quarter",
visitor_score: 70,
home_score: 72
},
{
datetime: 1420848000000,
visitor_team: {
city: "San Antonio",
name: "Spurs"
},
home_team: {
city: "Minnesota",
name: "Timberwolves"
},
period: "Halftime",
visitor_score: 58,
home_score: 43
},
{
datetime: 1420848000000,
visitor_team: {
city: "Orlando",
name: "Magic"
},
home_team: {
city: "Portland",
name: "Trail Blazers"
},
period: "First Quarter",
visitor_score: 13,
home_score: 26
}
]
}]);
game.html:
<div class="col-sm-4">
<div class="row scorecard">
<p class="period">{{ info.period }} </p>
<div class="visitor col-xs-4">
<h2 class="visitor-score">{{ info.visitor_score }} </h2>
<h3>
<span class="visitor-city">{{ info.visitor_team.city }} </span><br/>
<span class="visitor-name">{{ info.visitor_team.name }} </span>
</h3>
</div>
<div class="dash col-xs-3">
<h2>-</h2>
</div>
<div class="home col-xs-4">
<h2 class="home-score">{{ info.home_score }} </h2>
<h3>
<span class="home-city">{{ info.home_team.city }} </span><br/>
<span class="home-name">{{ info.home_team.name }} </span>
</h3>
</div>
</div>
</div>
game.js:
app.directive('game',function(){
return{
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/game.html'
}
}
);

Yes, you could. But you'd better not.
Clean code is simple and direct. Clean code reads like well-written
prose.
---- Grady Booch, author of Object-Oriented Analysis and Design with Applications
It's the matter of getting your code clean, beautiful and reusable.
Indeed, suppose you will need to show that repeated list on 10 differnt pages. Copypasting these 22 lines would be a very, very, very bad idea.
If you have it only in one place, well, you might want to leave it with ng-repeat, but it's likely you're going to reuse that, so you will have to refactor later anyway.
I think it might be useful for you to read some of Bob Martin's books or check out his videos, thay are awesome.
Cheers!