We Keep Coding

Component template should contain exactly one root element nuxt

I'm not sure what could be the issue here but I'm using nuxt to make a SPA app. and I'm getting an error from an already compiled piece of code I got from codepen. link to codepen
https://codepen.io/jjelic/pen/yevNLZ?editors=1010
When I try this code my my nuxt app I get an error.
I've added a file called monitor.vue in pages folder and added the html and js like so
Is this root element error common as I have never encountered it before with html and how can I avoid?
Vue.filter('currencyDisplay', {
// model -> view
read: function(val) {
if (val > 0) {
return accounting.formatMoney(val, "$", 2, ".", ",");
}
},
// view -> model
write: function(val, oldVal) {
return accounting.unformat(val, ",");
}
});
Vue.directive('sortable', {
twoWay: true,
deep: true,
bind: function() {
var that = this;
var options = {
draggable: Object.keys(this.modifiers)[0]
};
this.sortable = Sortable.create(this.el, options);
console.log('sortable bound!')
this.sortable.option("onUpdate", function(e) {
that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
});
this.onUpdate = function(value) {
that.value = value;
}
},
update: function(value) {
this.onUpdate(value);
}
});
var vm = new Vue({
el: '#app',
data: {
rows: [
//initial data
{
qty: 5,
description: "Something",
price: 55.20,
tax: 10
},
{
qty: 2,
description: "Something else",
price: 1255.20,
tax: 20
},
],
total: 0,
grandtotal: 0,
taxtotal: 0,
delivery: 40
},
computed: {
total: function() {
var t = 0;
$.each(this.rows, function(i, e) {
t += accounting.unformat(e.total, ",");
});
return t;
},
taxtotal: function() {
var tt = 0;
$.each(this.rows, function(i, e) {
tt += accounting.unformat(e.tax_amount, ",");
});
return tt;
}
},
methods: {
addRow: function(index) {
try {
this.rows.splice(index + 1, 0, {});
} catch (e) {
console.log(e);
}
},
removeRow: function(index) {
this.rows.splice(index, 1);
},
getData: function() {
$.ajax({
context: this,
type: "POST",
data: {
rows: this.rows,
total: this.total,
delivery: this.delivery,
taxtotal: this.taxtotal,
grandtotal: this.grandtotal,
},
url: "/api/data"
});
}
}
});
<template>
<div class="panel-body" id="app">
<table class="table table-hover">
<thead>
<tr>
<th style="width: 20px;">No.</th>
<th>Description</th>
<th style="width: 80px;">Qty</th>
<th style="width: 130px;" class="text-right">Price</th>
<th style="width: 90px;">Tax</th>
<th style="width: 130px;">Total</th>
<th style="width: 130px;"></th>
</tr>
</thead>
<tbody v-sortable.tr="rows">
<tr v-for="row in rows" track-by="$index">
<td>
{{ $index +1 }}
</td>
<td>
<input class="form-control" v-model="row.description" />
</td>
<td>
<input class="form-control" v-model="row.qty" number />
</td>
<td>
<input class="form-control text-right" v-model="row.price | currencyDisplay" number data-type="currency" />
</td>
<td>
<select class="form-control" v-model="row.tax">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
</select>
</td>
<td>
<input class="form-control text-right" :value="row.qty * row.price | currencyDisplay" v-model="row.total | currencyDisplay"
number readonly />
<input type="hidden" :value="row.qty * row.price * row.tax / 100" v-model="row.tax_amount | currencyDisplay"
number />
</td>
<td>
<button class="btn btn-primary btn-xs" #click="addRow($index)">add row</button>
<button class="btn btn-danger btn-xs" #click="removeRow($index)">remove row</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-right">TAX</td>
<td colspan="1" class="text-right">{{ taxtotal | currencyDisplay }}</td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right">TOTAL</td>
<td colspan="1" class="text-right">{{ total | currencyDisplay }}</td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right">DELIVERY</td>
<td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery | currencyDisplay"
number /></td>
<td></td>
</tr>
<tr>
<td colspan="5" class="text-right"><strong>GRANDTOTAL</strong></td>
<td colspan="1" class="text-right"><strong>{{ grandtotal = total + delivery | currencyDisplay }}</strong></td>
<td></td>
</tr>
</tfoot>
</table>
<button #click="getData()">SUBMIT DATA</button>
<pre>{{ $data | json }}</pre>
</div>
</template>

This problem is actually a very simple problem. I don't know vue, but the render method has the same limits of react's one: every component must have only one root element in its template.
This means that a situation like this isn't accepted:
<template>
<div></div>
<div></div>
</template>
But like this is correct:
<template>
<div></div>
</template>
This means that surely, somehow in the code you didn't show us, you're putting two elements as root of your template

How to can I create an array of knockout.js observables?

I have an array of objects for which I am showing their properties.
How can add an individual edit functionality to them? Lets say it to be an edit button for each one of the elements of the list.
I want to show input fields instead of text fields when the object is in edit mode, for this I am using the visible binding. So I need a Boolean observable for each of them.
How can I do this without knowing the amount of elements in the list... I also have add and delete, so I would need to add more observables to this array each time a new element is created.
I also tried to give a ko.observable element to my objects but I could not do this.

I like to use an object inside the observableArray. Here is an example of an inline edit feature for as many many rows as needed.
function Employee(emp) {
var self = this;
self.Name = ko.observable(emp.Name);
self.Age = ko.observable(emp.Age);
self.Salary = ko.observable(emp.Salary);
self.EditMode = ko.observable(emp.EditMode);
self.ChangeMode = function() {
self.EditMode(!self.EditMode());
}
}
function viewModel() {
var self = this;
self.Employees = ko.observableArray()
self.Employees.push(new Employee({
Name: "Joe",
Age: 20,
Salary: 100,
EditMode: false
}));
self.Employees.push(new Employee({
Name: "Steve",
Age: 22,
Salary: 121,
EditMode: false
}));
self.Employees.push(new Employee({
Name: "Tom",
Age: 24,
Salary: 110,
EditMode: false
}));
}
var VM = new viewModel();
ko.applyBindings(VM);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table border=1>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: Employees">
<tr data-bind="if: !EditMode()">
<td data-bind="text: Name"></td>
<td data-bind="text: Age"></td>
<td data-bind="text: Salary"></td>
<td><button data-bind="click: ChangeMode">Edit</button></td>
</tr>
<tr data-bind="if: EditMode()">
<td>
<input data-bind="value: Name">
</td>
<td>
<input data-bind="value: Age">
</td>
<td>
<input data-bind="value: Salary">
</td>
<td><button data-bind="click:ChangeMode">Save</button></td>
</tr>
</tbody>
</table>

Sorting a table with dynamically shown columns in AngularJS

I am trying to make a table which has sorting as well as a button to select which columns are to be displayed.
Both these features work when used alone but fail when I try to use them together.
JS
angular.module('test', []);
angular.module("test").controller("sessionCtrl", sessionCtrl);
function sessionCtrl() {
var vm = this;
vm.testvar= "HELLO";
vm.sortType = 'name';
vm.sortReverse = false;
vm.columnVisiblity = {
name: true,
specification: true,
type: true,
};
vm.TableData = [{
name: "2017/03/01-14",
specification: "IDB-idb-1wk",
type: "Full"
}, {
name: "2017/03/01-17",
specification: "Set-04",
type: "Full"
}, {
name: "2017/03/04-11",
specification: "IDB-idb-1wk",
type: "Full"
}];
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="sessionCtrl as vm">
{{vm.testvar}}
<table>
<thead>
<tr>
<th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME
</th>
<th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION
</th>
<th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse">
<td ng-if="vm.columnVisiblity.name">{{item.name}}</td>
<td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td>
<td ng-if="vm.columnVisiblity.type">{{item.type}}</td>
</tr>
</tbody>
</table>
TOGGLE NAME
TOGGLE SPECIFICATION
TOGGLE TYPE
</body>
Basically I'm making a table whose columns are visible on the basis of the columnVisibility object.
And I'm using orderby filter to sort the table.

Problem is TOGGLE NAME here spelling of columnVisibility doesnt match with that in controller
vm.columnVisiblity = {
name: true,
specification: true,
type: true,
};
It is a typing mistake, correct the spelling and it will work
Demo : https://jsfiddle.net/m7a74L8f/

angular.module('test', []);
angular.module("test").controller("sessionCtrl", sessionCtrl);
function sessionCtrl() {
var vm = this;
vm.testvar= "HELLO";
vm.sortType = 'name';
vm.sortReverse = false;
vm.columnVisiblity = {
name: true,
specification: true,
type: true,
};
vm.TableData = [{
name: "2017/03/01-14",
specification: "IDB-idb-1wk",
type: "Full"
}, {
name: "2017/03/01-17",
specification: "Set-04",
type: "Full"
}, {
name: "2017/03/04-11",
specification: "IDB-idb-1wk",
type: "Full"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="sessionCtrl as vm">
{{vm.testvar}}
<table>
<thead>
<tr>
<th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME
</th>
<th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION
</th>
<th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse">
<td ng-if="vm.columnVisiblity.name">{{item.name}}</td>
<td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td>
<td ng-if="vm.columnVisiblity.type">{{item.type}}</td>
</tr>
</tbody>
</table>
TOGGLE NAME
TOGGLE SPECIFICATION
TOGGLE TYPE
</div>

hidden column shows up when updating element

I'm using a table in which I'm displaying some objects. I'm using jquery (bad, I know. But only thing I could get working) to add/remove class ng-hide from all elements with a specific ID. This results in a column being hidden and it works fine. But when any updates from the server comes and I use $scope.rows.push(object) and $scope.apply() the order of the columns gets messed up and the hidden column gets right back..
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table>
<thead style="font-weight: bold;">
<tr>
<td class="text-right" data-col-id="Value1">Value1</td>
<td class="text-right" data-col-id="Value2">Value2</td>
<td class="text-right" data-col-id="Value3">Value3</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td class="text-right" data-col-id="Value1">{{row.Value1}}</td>
<td class="text-right" data-col-id="Value2">{{row.Value2}}</td>
<td class="text-right" data-col-id="Value3">{{row.Value3}}</td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked" ng-change="columnToggled(column)"> {{column.id}}
</div>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
//trigger update
window.setInterval(function() {
$scope.simulateUpdates($scope.rows[0]);
}, 5000);
$scope.simulateUpdates = function (row) {
var newRow =
{
id: 1,
"Value1": Math.floor(Math.random() * 100) + 1,
"Value2": Math.floor(Math.random() * 100) + 1,
"Value3": Math.floor(Math.random() * 100) + 1
}
updateRow(newRow);
$scope.$apply();
}
function updateRow(row) {
for (var i = 0; i < $scope.rows.length; i++) {
if ($scope.rows[i].id === row.id) {
$scope.rows[i] = row;
}
}
}
});
Here is a demo of my problem in a minor scale: http://plnkr.co/edit/1tGci7qX9ZFIk69uNfIf?p=preview (uncheck one of the columns)

You overcomplicate things a bit: your model seems to be pretty simple actually. The key is using templates to express it properly. That's how it might look like, for example:
<table>
<thead>
<tr>
<th class="text-right" ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="row[column.id]"></td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
See? No need for that extra function: when you change the specific column checked attribute, it's automatically updated in all the corresponding views.
Demo.

I have fixed your code without using jQuery.
<table>
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" class="text-right" data-col-id="column.id" ng-show="column.checked">
{{column.id}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td class="text-right" data-col-id="Value1" ng-show="columnsTest[0].checked">{{row.Value1}}</td>
<td class="text-right" data-col-id="Value2" ng-show="columnsTest[1].checked">{{row.Value2}}</td>
<td class="text-right" data-col-id="Value3" ng-show="columnsTest[2].checked">{{row.Value3}}</td>
</tr>
</tbody>
</table>
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
You don't need to bind the ng-change function to the input checkbox since you already assigned it the ng-model using two-way data-binding.
The following is the working :Plunker

How to display data with multiple arrays as an html table with angular.js?

Assuming data structured like:
[
{name: 'first', data1: [1,2,3], data2: [4,5]},
{name: 'second', data1: [9,8,7], data2: [6,6,4,5]},
...
]
(Note data1 and data2 are not fixed lengths and not necessarily the same length).
I'd like to create an html table like:
<table>
<thead>
<th> Name </th>
<th> Data 1 </th>
<th> Data 2 </th>
</thead>
<tbody>
<tr>
<td rowspan="4">first</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5">first</td>
<td>9</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<table>
Notice that in the display there is at least one extra empty cell after the last bit of data in each column. I'd like that cell, the first empty cell for each of data1 and data2, to have an ng-click handler which if clicked would show a input in that column instead of %nbsp; where one could enter a new value.
What's the best way to accomplish this?
Currently I can almost create the above structure by having a second variable on the scope which watches the first and when the first changes it flattens the data so the above data would be stored in another variable as:
[ { name: 'first', rowsNeeded: '4', data: [ [1,4], [2,5], [3, undefined], [undefined, undefined]], ... ]
and then rendering it like
<tbody ng-repeat="item in flattenedData">
<tr ng-repeat="data in item.data">
<td ng-if="$first" rowspan="{{data.rowsNeeded}}">{{data.name}}</td>
<td>{{data[0] == undefined ? ' ' : macroData[0] }}</td>
<td>{{data[1] == undefined ? ' ' : macroData[1] }}</td>
</tr>
</tbody>
But I'm wondering a few things. One, do I really need to have a second variable using a watch statement to create the table or is there a cleaner way? Two, I'm not sure how I'd add the click event so on the first 'undefined' in each column I could add an instead of '&nbsp'. Lastly, is it really necessary to have a different tbody tag for each row?
Thanks for your help!!

The general idea is to extract data formatting into filters. From there on, I'd combine everything into directive to simplyfy table component usage. This example (JSBin) shows only filters and template, non-optimal, but working:
<table>
<thead>
<tr>
<th>Name</th>
<th ng-repeat="key in datas[0]|dataKeys">
Data {{$index+1}}
</th>
</tr>
</thead>
<tbody ng-repeat="set in datas">
<tr ng-repeat="row in (set|setMaxLength|range)">
<td
rowspan="{{(set|setMaxLength)+1}}"
ng-if="!$index"
>
{{set.name}}
</td>
<td ng-repeat="data in (set|setDatas)">
{{data[$parent.$index]}}
</td>
</tr>
<tr>
<td
ng-repeat="data in (set|setDatas)"
ng-click="editing = true"
>
<span ng-if="!editing"> </span>
<form
ng-submit="data[data.length] = input.value"
name="input"
>
<input
type="text"
ng-if="editing"
ng-model="input.value"
autofocus
>
</form>
</td>
</tr>
</tbody>
</table>
angular
.module("app", [])
.controller("ctrl", function($scope) {
$scope.datas = [{
name: 'first',
data1: [1, 2, 3],
data2: [4, 5]
}, {
name: 'second',
data1: [9, 8, 7],
data2: [6, 6, 4, 5]
}];
})
.filter("range", function() {
return function(length) {
return Array.apply(0, Array(length))
.map(function(_, i) {
return i;
})
}
})
.filter("dataKeys", function() {
return function(set) {
return Object.keys(set)
.filter(function(key) {
return key.indexOf("data") !== -1;
})
}
})
.filter("setDatas", function($filter) {
return function(set) {
return $filter("dataKeys")(set)
.map(function(key) {
return set[key]
});
}
})
.filter("setMaxLength", function($filter) {
return function(set) {
return $filter("dataKeys")(set)
.map(function(key) {
return set[key].length;
})
.sort().pop();
}
})