We Keep Coding

VueJS v-for rendering list despite v-if evaluating to false

According to the vue js style guide,
To avoid rendering a list if it should be hidden (e.g. v-for="user in users" v-if="shouldShowUsers"). In >these cases, move the v-if to a container element (e.g. ul, ol).
In my case, I am using v-for to render data in table rows but when the list is null, v-for still tries to access the null object's properties which leads to the following console error:
Error in render: "TypeError: Cannot read property 'logo' of null"
Here's my HTML code
<tbody class="list" v-if="subscribers.length > 0">
<tr v-for="(subscriber, index) in subscribers" :key="index">
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="subscriber.logo" :src="`/img/avatars/${subscriber.logo}`">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">{{subscriber.name}}</span>
</div>
</div>
</th>
<td>{{subscriber.email}}</td>
<td>{{subscriber.licenses}}</td>
<td>{{subscriber.status}}</td>
<td class="table-actions">
<a href="#!" class="table-action" data-toggle="tooltip"
data-original-title="Edit">
<i class="fas fa-user-edit" v-on:click="loadSubscriberEdit(index)"></i>
</a>
<a href="#!" class="table-action table-action-delete" data-toggle="tooltip"
data-original-title="Delete">
<i class="fas fa-trash" v-on:click="deleteSubscriber(index)"></i>
</a>
<a href="#!" v-bind:class="computeActiveActions(index)"
:key="activeActionClassKey"
data-toggle="tooltip"
data-original-title="Delete">
<i v-bind:class="computeActive(index)" :key="activeClassKey"
v-on:click="toggleActivation(index)"></i>
</a>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td class="table-actions">No Subscriber found.</td>
</tr>
</tbody>
When subscribers list is null, the v-else block is rendered which works fine, however, the console still logs the above mentioned error
Error in render: "TypeError: Cannot read property 'logo' of null"
What can I do to stop v-for from trying to render if subscribers list is empty?

new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- CASE 1 -->
<!--div id="app">
<table>
<tbody v-if="false">
if
</tbody>
<tbody v-else>
else
</tbody>
</table>
</div-->
<!-- CASE 2 -->
<div id="app">
<table>
<tbody>
<template v-if="false">
if
</template>
<template >
else
</template>
</tbody>
</table>
</div>
I know this is weird but for some reason, v-if doesn't seem to work with tbody.
Case 1 is the desired code and Case 2 is a work around

Scala dynamic src in iframe not working

I was trying to integrate an iframe into one tool to administer kafka, Trifecta. In consumers.html file, i made modifications like below;
<table style="width: 100%; border: 1px solid #dddddd">
<tr style="border-bottom: 1px solid #dddddd">
<th class="col-md-3 left">Partition / Owner</th>
<th class="col-md-3 left">Topic</th>
<th class="col-md-3 left">Consumer</th>
<th class="col-md-2 left">Remaining</th>
<th class="col-md-1 center">Last Updated</th>
<th class="col-md-1 center">Monitor</th>
</tr>
<tr ng-repeat="coffset in t.offsets | orderBy:'partition'">
<td class="left" title="{{ fixThreadName(t.consumerId, t.threadId) }}">
{{ coffset.partition }}
<span ng-show="getConsumerHost(consumer, coffset)" class="small">
: {{ getConsumerHost(consumer, coffset) }}
(<span class="kafkaProtocolVersion">{{ getConsumerVersion(consumer, coffset) }}</span>)
</span>
<span ng-hide="getConsumerHost(consumer, coffset)" class="small null">
: Consumer information unavailable
</span>
</td>
<td class="left">
{{ coffset.topicEndOffset }}
<span class="delta_topic small" ng-show="getTopicPartitionDelta(t.topic, coffset.partition)">
<img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ getTopicPartitionDelta(t.topic, coffset.partition) | number }}
</span>
</td>
<td class="left">
<a ng-click="switchToMessage(coffset.topic, coffset.partition, coffset.offset)">{{ coffset.offset || 0 }}</a>
<span class="delta_topic small" ng-show="coffset.deltaC">
<img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ coffset.deltaC | number }}
</span>
</td>
<td class="left">
{{ getMessagesLeft(coffset) | number }}
<span class="delta_consumer small" ng-show="coffset.deltaC">
<img src="/assets/images/tabs/inspect/arrow_consumer.gif"> {{ coffset.deltaC | number }}
</span>
</td>
<td class="center small">
<span ng-show="coffset.lastModifiedTime">{{ coffset.lastModifiedTime | duration }}</span>
<span ng-hide="coffset.lastModifiedTime" class="null">N/A</span>
</td>
<td class="center small">
<a target="_blank" href="http://192.168.1.12:9020/#/group/{{consumer.consumerId}}/{{ t.topic }}">click</a>
</td>
</tr>
<tr>
<td colspan="6" style="height:400px;overflow:hidden" consumer="{{consumer.consumerId}}" topic="{{t.topic}}">
<iframe class="graphiframe" src="http://192.168.1.12:9020/graph.html#/group/{{consumer.consumerId}}/{{t.topic}}" frameborder="0" style="overflow:hidden" height="100%" width="100%">Loading...</iframe>
</td>
</tr>
</table>
The href of a is working, but iframe is not working even if the links same. How can i fix this?
Thank you.

Check the security headers: https://www.playframework.com/documentation/2.6.x/SecurityHeaders#Configuring-the-security-headers
Play 2.6 sets the X-Frame-Options to DENY by default, so your page will not be displayed in iframe:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Setting the frameOptions in the application.conf to null must fix your problem:
play.filters.headers.frameOptions = null

Vue.js component within inline component

I've got this code in Vue.js 2.0:
<forums inline-template v-cloak>
<div v-if="!loading">
<div v-if="!validation.isEmpty(forums)">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-4 table__title">
Topic
</th>
<th class="col-md-2 table__title">
Bericht
</th>
<th class="col-md-3 hidden-xs hidden-sm table__title">
Laatste
</th>
</tr>
</thead>
<tbody>
<tr #click="link(forum)" v-for="(forum, index) in forums">
<td class="col-md-4">
#{{ forum.name }}
<div class="hidden-xs hidden-sm">
<p>
<i class="table__subtitle">#{{ forum.description }}</i>
</p>
</div>
</td>
<td class="col-md-2">
#{{ forum.messages_count }}
</td>
<td class="col-md-3 hidden-xs hidden-sm">
#{{ latestMessageAuthor(forum) }}
</td>
#if(Auth::user()->isAdmin())
<td class="col-md-2 hidden-xs hidden-sm">
<i class="material-icons" #click.stop="destroy(forum)">

</i>
<a :href="'/bewerk/forum/' + forum.slug">
<i class="material-icons"></i>
</a>
<i class="material-icons" #click.stop="increment(forum, index)">

</i>
<i class="material-icons" #click.stop="decrement(forum, index)">

</i>
</td>
#endif
<subscription :context="forum.subscriptions_count" :service="service"></subscription>
</tr>
</tbody>
</table>
</div>
<div v-else>
<p class="text-center">Geen forums.</p>
</div>
</div>
<div class="center" v-else>
<loader :loading="loading"></loader>
</div>
</forums>
The problem is that I receive this error in my console:
[Vue warn]: Property or method "forum" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Forums> at /Users/Code/forumv2/resources/assets/js/components/forum/forums.vue)
I pass the forum.subscriptions_count to my subscription component. Here it goes wrong. Forum is undefined?
Why is that because it's in a v-for="(forum, index)" loop! Does this not work with inline templates?

On xeditable grid where move a cursor same column when user press the Tab key

I'm using Xeditable grid.Could you tell me how to move a cursor same column when user press the Tab key ? i.e move on Name column.Thanks in advance.
JSFiddle
Note : By default it moves horizontally on the row.I need it moves vertically on the column.
<h4>Angular-xeditable Editable table (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()" shown="true">
<!-- table -->
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:40%">Name</td>
<td style="width:30%">Status</td>
<td style="width:30%">Group</td>
<td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
</tr>
<tr ng-repeat="user in users | filter:filterUser">
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
{{ showGroup(user) }}
</span>
</td>
<td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
</tr>
</table>
<!-- buttons -->
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
edit
</button>
</div>
<div class="btn-form" ng-show="tableform.$visible">
<button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
</div>
</form>
</div>

You need to add e-tabindex to your columns like this.
<tr ng-repeat="user in users | filter:filterUser">
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)" e-tabindex="1">
{{ user.name || 'empty' }}
</span>
</td>
<td>
<!-- editable status (select-local) -->
<span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses" e-tabindex="2">
{{ showStatus(user) }}
</span>
</td>
<td>
<!-- editable group (select-remote) -->
<span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups" e-tabindex="3">
{{ showGroup(user) }}
</span>
</td>
<td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right" tabindex="4">Del</button></td>
</tr>

(Laravel) Open modal dynamically with data from DB

I'm pretty new in programming and I'm stuck with a problem which I really don't know how to solve.
Basically I have a view wich contains a table filled with events:
// routes.php
Route::get('calendario/calendario_personale', 'CalendarioController#creaCalendarioPersonaleLista');
// controller
public function creaCalendarioPersonaleLista() {
$lista_militi = Milite::where('Aktiv', '=', 'True')
->orderBy('Name')
->orderBy('Vorname')
->get();
$milite = Milite::where('eMailB', '=', Auth::user()->email)
->first();
$agenda = Milite::find($milite->KeyPerson)
->AgendaPersonale
->all();
return View::make('calendario_personale', compact('agenda'))
->with('lista_militi', $lista_militi);
}
// view
<!-- ********** INIZIO EXTENDED MODAL - FORMULARIO ANNUNCIO ASSENZE ********** -->
<div id="annuncio_assenza" class="modal fade" tabindex="-1" data-width="550">
#var $key = '4000';
#var $spec_agenda = Agenda::find($key)
<div class="modal-body">
{{ Form::open(['action' => 'CalendarioController#inviaAnnuncioAssenza']) }}
<div class="row">
<div class="col-md-12">
<span class="_red"><h3> Annuncio d'assenza </h3>
<h5> Da inviare almeno 48 ore prima dell'evento </h5></span>
<br/>
<h5> Non posso essere presente a <span class="_bold"> {{ $spec_agenda->Bezeichnung }} </span></h5>
<h5> che si terrà il giorno <span class="_bold"> {{ date('d.m.Y', strtotime($spec_agenda->Datum)) }} </span> alle ore <span class="_bold"> {{ date('H:i', strtotime($spec_agenda->Zeit)) }} </span></h5>
<h5> per il seguente motivo: </h5><br/>
<table id="form-assenza">
<tr>
<td> {{ Form::checkbox('personale') }} Personale </td>
<td> {{ Form::checkbox('vacanza') }} Vacanza </td>
</tr>
<tr>
<td> {{ Form::checkbox('professionale') }} Professionale </td>
<td> {{ Form::checkbox('militare') }} Servizio militare/PCi </td>
</tr>
<tr>
<td> {{ Form::checkbox('infortunio') }} Infortunio/malattia </td>
<td> {{ Form::checkbox('altri_impegni') }} Altri impegni </td>
</tr>
</table>
{{ Form::hidden('cosa', $spec_agenda->Bezeichnung) }}
{{ Form::hidden('data', date('d.m.Y', strtotime($spec_agenda->Datum))) }}
{{ Form::hidden('ora', date('H:i', strtotime($spec_agenda->Zeit))) }}
<br/><br/>
<h5><span class="_red"> Da compilare in caso di assenza per Guardia Festiva, picchetto e/o appoggio: </span></h5>
<h5> Verrò sostituita/o da: </h5>
<div class="form-group">
<select class="form-control" style="font-size: 1em" name="sostituto">
<option value=""> Seleziona un milite... </option>
#foreach($lista_militi as $militi)
<option value="{{ $militi->KeyPerson }}"> {{ $militi->Dienstgrad }} {{ $militi->Name }} {{ $militi->Vorname }} </option>
#endforeach
</select>
</div>
<br/><h5> Altro/Osservazioni </h5>
<p> {{ Form::textarea('altro', null, ['class'=>'form-control _small', 'rows' => '3']) }} </p>
</div>
</div>
</div>
<div class="modal-footer">
{{ Form::button('Annulla', ['class'=>'btn btn-default', 'data-dismiss'=>'modal']) }}
{{ Form::submit('Invia il formulario', ['class'=>'btn red']) }}
</div>
{{ Form::close() }}
</div>
<!-- ********** FINE EXTENDED MODAL - FORMULARIO ANNUNCIO ASSENZE ********** -->
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
<!-- ********** INIZIO PORTLET ********** -->
<div class="portlet box red profile margin-top-minus5">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-calendar-o"></i> Calendario personale
</div>
<ul class="nav nav-tabs">
<li class="active">
Personale
</li>
<li>
Corpo
</li>
</ul>
</div>
<div class="portlet-body">
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-bordered table-hover _dark-grey" id="table_custom">
<thead>
<tr>
<!-- Visualizzazione su xs -->
<th class="hidden-sm hidden-md hidden-lg on-one-line"> Data </th>
<!-- Visualizzazione su sm, md e lg -->
<th class="hidden-xs on-one-line"> Data </th>
<th> Descrizione </th>
<!-- Visualizzazione sm, md e lg -->
<th class="hidden-xs on-one-line"> Assenza </th>
<!-- Visualizzazione xs -->
<th class="hidden-sm hidden-md hidden-lg on-one-line"> Ass. </th>
</tr>
</thead>
<tbody id="link-disable">
#foreach($agenda as $evento)
<tr>
<!-- Visualizzazione su xs -->
<td class="hidden-sm hidden-md hidden-lg on-one-line">
<span class="_bold">
{{ date('d.m.Y', strtotime($evento->Datum)) }}
</span><br/>
{{ $evento->dalle_alle }}
</td>
<!-- Visualizzazione su sm, md e lg -->
<td class="hidden-xs on-one-line">
<span class="_bold">
{{ date('d.m.Y', strtotime($evento->Datum)) }}
</span>
{{ $evento->dalle_alle }}
</td>
<td>
{{ $evento->Bezeichnung }}
#if($evento->Objekt != null) , luogo: {{ $evento->Objekt }} #endif
, {{ $evento->Einsatzart }}
#if($evento->Leiter != null) , responsabile: {{ $evento->Leiter }} #endif
</td>
<!-- Visualizzazione sm, md e lg -->
<td class="hidden-xs on-one-line">
{{ HTML::link('#annuncio_assenza', 'Annuncia', ['onclick' => 'specAgenda('.$evento->KeyAgenda.')', 'id' => 'form_assenza', 'data-toggle' => 'modal', 'name' => 'link_form_assenza', 'data-value' => $evento->KeyAgenda]) }}
</td>
<!-- Visualizzazione xs -->
<td class="hidden-sm hidden-md hidden-lg on-one-line">
{{ HTML::link('#annuncio_assenza', 'Ann.', ['onclick' => 'specAgenda('.$evento->KeyAgenda.')', 'id' => 'form_assenza', 'data-toggle' => 'modal', 'name' => 'link_form_assenza', 'data-value' => $evento->KeyAgenda]) }}
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ********** FINE PORTLET ********** -->
</div>
As you can imagine every event has a key, which I save in the data-value of my link ($evento->KeyAgenda).
Now, as the page does not reload how can I pass my key to my modal form?
I tried with some JavaScript but it doesn't seem to work and it's been to day wasted now, I'm sick.
Can someone help me making this work???
Thank you in advance!!

Let me try to explain better the situation...
I have the view with the calendar. I populate the table using a foreach and data from a model.
See the image at this link:
https://www.dropbox.com/s/3ewcmy73gksjwcw/calendario.jpg?dl=0
Then I have my modal form, which is linked to the word "Annuncia" on the last column, like that: https://www.dropbox.com/s/sjft7a1wtb6wvj2/modaleassenza.jpg?dl=0
What I'd like to do is to populate the form with some information which are connected to the row event. For example when I click on the first raw the modal should have the bold parts already filled with the right records (description, date and time).
I hope it's clearer now... and sorry but English is not my mother language.