I'm having trouble understanding why this is happening! So, this block of code:
<div class="container">
<div class="row" v-for="rows in data.Rows"> {{ rows }} </div>
</div>
Will render all the rows in the object.
But, when I use the same syntax in a table instead like this:
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
I get the error:
[Vue warn]: Property or method "rows" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
How come there are issues in using the v-for like this in a table? I want a table to display the data as it better suits the purpose in this case. Othewise I would have chosen divs instead of table rows, but I would love for this to works. Any ideas as to why this is happening?
If you use that template directly within an HTML file (as opposed to a template string or SFC) it will be parsed by the browser before it gets to Vue. Browsers are fussy about tables and what elements are allowed inside which other elements.
The example below shows how the browser will parse your template into DOM nodes. Notice how the {{ rows }} gets moved:
let html = document.getElementById('app').innerHTML
html = html.replace(/</g, '<').replace(/>/g, '>')
document.getElementById('output').innerHTML = html
#app {
display: none;
}
<div id="app">
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
</div>
<pre id="output">
</pre>
It is this mangled version of the template that Vue is trying to run and as you can see {{ rows }} has been moved outside the v-for, causing the error.
The official documentation covers this here:
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
The solution would just be to include a <td> in your template:
<table>
<tr v-for="rows in data.Rows">
<td>{{ rows }}</td>
</tr>
</table>
You cannot directly use "rows" property inside tr tag, you need td tag
like this
<table>
<tr class="row" v-for="rows in data.Rows"> <td>{{ rows }} </td></tr>
</table>
working codepen here: https://codepen.io/chansv/pen/dyyVybK
Related
I wanted to drag multiple table data in a row instead of just a single td tag. In other words, when i drag either columns, i want to drag both the "Random" and "name" column together.
<table id="app">
<tr>
<th>Random</th>
<th>name</th>
</tr>
<tr>
<td>
<draggable v-model="items">
<transition-group name="list-complete">
<div v-for="item in items"
v-bind:key="item.message"
class="list-complete-item">
{{ item.message }}
</div>
</transition-group>
</draggable>
</td>
<td>
<div v-for="item in items" class="list-complete-item">
{{ item.name }}
</div>
</td>
</tr>
</table>
I have tried shifting and playing around with the draggable tag and the transition-group tag but nothing seems to work.
Please help. :(
Here is my jsfiddle code ->
https://jsfiddle.net/wusprtnL/63/
This is not supported by Sortable nor by Vue.draggable. So there are no combination of options that will make irt work. Reference: https://github.com/SortableJS/Sortable/issues/1049
Right now this is supported as a plugin by sortable, but the plugin has not been integrated in vue.draggable.
https://github.com/SortableJS/Vue.Draggable/issues/649
i have an div which contains angularjs ng-repeat directive to list all values. after assigning to scope variable which is being used by ng-repeat if i load modal using
$('#divId').modal('show')
all variables are getting loaded, but if i use document.getElementby('Id'), i am able to to see variable binding only for
{{ }}
here is my code
<div id="labeltoPrint">
Date: {{ scpDate }}
<table>
<tr ng-repeat="item in listofItems">
<td> {{item.name}} </td>
<td> {{item.value}} </td>
</tr>
</table>
</div>
i tried to $scope.$apply but no luck
Thanks
for reading this
After several hits, i did a work around using $timeOut, scope variables are getting updated with that, donno why $scope.$apply is not updating scope :(
Thanks for reading
I am creating a table from data brought in as a JSON. This could be tonnes of data so I have a loop making all the rows in the table. I want to be able to click on a row and have that row expand showing the 2nd row with the list.extraInfo beneath it. Code looks like this:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
I'm well aware that having data-target="#{{i}}" and id="{{i}}" doesn't work, but I cannot find anywhere what it is I need to put there to get every row of the table to have a separate and distinct id number so that the collapse feature works on the row that you click on.
As it stands it opens the extraInfo row for the 1st row regardless of which row I click on.
Curly brace syntax ({{ }}), also called interpolation, is meant for inner HTML. That is why {{i+1}} works in your td but not in your tr tag. To use a variable in a <tr> attribute, you don't need to wrap it in curly braces.
Secondly, the Can't bind to 'target' since it isn't a known property of 'tr'. error suggests that you need to use an attribute input binding instead:
<tr data-toggle="collapse" [attr.data-target]="'#'+ i" class="clickable">
Can I use ngIf without an extra container element?
<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>
It doesn't work in a table because that would make invalid HTML.
ng-container is preferred over template:
<ng-container *ngIf="expression">
See:
Angular 2 ng-container
https://github.com/angular/angular.io/issues/2303
I found a method for that on: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template.
You can simply use the <template> tag and replace *ngIf with [ngIf] like this.
<template [ngIf]="...">
...
</template>
You can't put div directly inside tr, that would make invalid HTML. tr can only have td/th/table element in it & inside them you could have other HTML elements.
You could slightly change your HTML to have *ngFor over tbody & have ngIf over tr itself like below.
<tbody *ngFor="...">
<tr *ngIf="...">
...
</tr>
<tr *ngIf="!...">
...
</tr>
..
</tbody>
adding brackets resolves this issue
<ng-container *ngIf="(!variable| async)"></ng-container>
You can try this:
<ng-container *ngFor="let item of items;">
<tr *ngIf="item.active">
<td>{{item.name}}</td>
</tr>
</ng-container>
Here, I have iterate loop in ng container so it will not create extra dom and later in tr tag check condition if I want to render or not.
I have a django app that I need to get in a list format. My problem is the how the event list is stylized in HTML after I filter my results. I have tried to add and it does not seem to take and probably isn't the best practice.
I have been successful with using a table, but really don't like the look of it. Is there a way to just have an unordered list with appropriate spacing using a div or span tag? For example I would like for my list to look like
2/6/2013 Widget Company Chicago
2/7/2013 Dodad Company2 Kansas City
rather than
2/6/2013 Widget Company Chicago
2/7/2013 Dodad Company2 Kansas City
Here is my code, currently as a table.
{% if latest_events %}
{% for event in latest_events %}
<table border="1">
<tr>
<td> {{ event.event_date }} </td> <td>{{ event.company }}</td> <td> {{ event.venue }} </td> <td>{{ event.city }}</td>
</tr>
</table>
{% endfor %}
</ul>
{% else %}
<p>No Events are available.</p>
{% endif %}
Use the center template-tag - it will do the job for you.
Available alternatives: ljust and rjust
If all you want is extra spacing between the elements, add some padding.
http://jsfiddle.net/n762q/
table.associates td, table.associates th {
padding-right: 2em;
}
<table class="associates">
<thead>
<tr>
<th>Date</th>
<th>Company</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>2/6/2013</td>
<td>Widget Company</td>
<td>Chicago</td>
</tr>
<tr>
<td>2/7/2013</td>
<td>Dodad Company2</td>
<td>Kansas City</td>
</tr>
</tbody>
</table>
Alternately, you could specify a min-width on your cells or the table itself.
http://jsfiddle.net/n762q/1/
table.associates {
min-width: 70%;
}
The problem here is browsers strip sequences of white space, so(_ = space) ____ will become _.
As stated above the solution is to style your table.
Just setting a width on the table element may give you the results you're looking for as tables do not consume more width than necessary by default. However they adjust their cells with the change of their width.
You are dealing here with HTML only, I recommend using Twitter Bootstrap since it comes with a lot of nice things(style/css) you can use and is really extremely easy to use. For example, it has tables, give it a look at it Twitter Boostrap tables or maybe the grid Twitter Bootstrap Grid