Vue.js component within inline component - javascript

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?

Related

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

Loading of a td value using another td value in Ember hbs file

I have an ember hbs component, in which we have table, in which the value of a td should be decided depending upon the value of the previous td, here is my hbs code, any help please?
<div class="row">
<div class="col-md-12">
{{#if model.novs}}
<table class="table table-striped">
<thead>
<tr>
<th>Notice#</th>
<th>Type</th>
<th>Violation</th>
<th>Inspection Item</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
{{#each model.novs as |nov index|}}
<tr>
<td>{{nov.NOVNumber}}</td>
<td>{{nov.NOVNoticeTypeName}} {{nov.ViolationTypeName}}</td>
<td>
{{#each nov.Violations as |novv index|}}
{{novv.ViolationNumber}}
{{novv.Year}}
{{novv.Make}}
{{novv.Model}}
{{#if novv.Vin}}(VIN#:
{{novv.Vin}})
{{/if}}
<br />
{{/each}}
</td>
<td>
{{#each model.result.items as |novi index|}}
{{novi.itemNum}}
<br />
{{/each}}
</td>
<td>
{{#if isResCompletedStatus}}
<div class="btn btn-xs btn-default" onclick={{action "editNov" nov.NOVId}}>
<i class="fa fa-eye"></i>
View Notice
</div>
<div class="btn btn-xs btn-default" onclick={{action "generatePreCase" nov.NOVId }}>
<i class="fa fa-file"></i>
Generate Investigation
</div>
{{else}}
<div class="btn btn-xs btn-default" onclick={{action "editNov" nov.NOVId}}>
<i class="fa fa-edit"></i>
Edit Notice
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
{{#unless isResCompletedStatus}}
{{#link-to 'result.details.nov.details' 0 disabled=isResFormDisabledBoolean}}
<div class="well text-center no-margin">
Click here to add a Notice.
</div>
{{/link-to}}
{{else}}
<div class="well text-center no-margin">
No notices...
</div>
{{/unless}}
{{/if}}
</div>
</div>
In the above code, the model.result.items has Violation element, how can I display the novi.itemNum for the novv.ViolationNumber that is displayed, any help please - thanks in advance.
Not 100% clear on your question, but I think you are looking to filter one collection (model.result.items) by a value (novv.ViolationNumber). If that is the case, you could use ember-composable-helpers#find-by.
<td>
{{#with (find-by 'ViolationNumber' novv.ViolationNumber model.result.items) as |item|}}
{{log item}}
{{/with}}
</td>

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 v-bind to function not working?

Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by ID.
<template>
<list baseurl="/ajax/admin/customers" ordering="id" paginationOffset="20" inline-template>
<div class="row">
<loader :loading="loading"></loader>
<div class="col-sm-12" v-if="!loading">
<div class="row">
<div class="col-sm-6">
<h4>Showing {{ pagination.total }} results</h4>
</div>
<div class="col-sm-6 ">
<!--This button calls the openCanvas method which then triggers the open-canvas event-->
<button #click.prevent="openCanvas()"
class="btn btn-default pull-right" id="newCustomer">New Customer
</button>
</div>
</div>
<table class="table admin-table">
<thead>
<tr>
<th class="">
ID
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('id')" :class="{active: (orderBy == 'id')}"></i>
</a>
</th>
<th class="">
Title
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('first_name')"
:class="{active: (orderBy == 'first_name')}"></i>
</a>
</th>
<th class="hidden-xs">
Account
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('account')"
:class="{active: (orderBy == 'account')}"></i>
</a>
</th>
<th class="hidden-xs">
Company
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('company')"
:class="{active: (orderBy == 'company')}"></i>
</a>
</th>
<th class="hidden-xs">
Email
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('email')"
:class="{active: (orderBy == 'email')}"></i>
</a>
</th>
<th class="hidden-xs">
Phone
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('phone')" :class="{active: (orderBy == 'phone')}"></i>
</a>
</th>
<th class="">
City
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('city')"
:class="{active: (orderBy == 'city')}"></i>
</a>
</th>
<th class="hidden-xs">
Country
<a> <i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('country')"
:class="{active: (orderBy == 'country')}"></i>
</a>
</th>
<th class="">
Created
<a><i class="mdi mdi-sort" aria-hidden="true"
#click.prevent="order('created_at')"
:class="{active: (orderBy == 'created_at')}"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td><a v-bind:href="generateCustomerUrl(item.id)" title="Navigate to Customer page">
{{ item.id }}
</a>
</td>
<td v-text="fullName(item)">
</td>
<td>
{{ item.type }}
</td>
<td>
{{ item.company }}
</td>
<td class="hidden-xs">
{{ item.email }}
</td>
<td class="hidden-xs">
{{ item.phone }}
</td>
<td class="hidden-xs">
{{ item.city }}
</td>
<td>
{{ item.country }}
</td>
<td class="hidden-xs">
{{ item.created }}
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="pagination-container">
<pagination :pagination="pagination" :offset="20"></pagination>
</div>
</div>
</div>
</div>
</list>
</template>
The function is declared in the module's methods
/**
* Private methods for this vue class
*
**/
methods: {
clearSearch() {
this.filters.search = '';
EventBus.fire('apply-filters', this.serializedFilter);
},
generateCustomerUrl(id) {
return "/admin/customers/" + id;
}
},
However vue js errors saying
vm.generateCustomerUrl is not a function Stack trace:
How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).
The issue was due to component nesting in Vue.js, trying to call the parent component's methods whilst inside the scope of <list></list>
The solution was the pass the method as a property to the list component
e.g.
<list generateUrl=this.generateUrl></list>

Bootstrap Modals to redirects me to a blank page

The website that I’ve made works perfectly fine without a build system. However, I am currently having a problem with the bootstrap modals with the Yeoman: Angular + Gulp build system. Whenever I click on the list item the modal does not appear, it takes me straight to blank page. I haven’t been able figure out the cause of this event.
At some point, the modals appeared to work without having to make any adjustments to the scripts. I restarted the grunt server again, and I was back to where I was. I don’t understand why the modals don’t appear and take me to blank page. Any ideas?
I was thinking this may had to do something with the Angular Routing, but I am not sure. I’ve already made some adjustments, and I am not receiving any sort of error message in the console. I need some advice on how to fix the problem. Any help will be appreciated.
The link to my code GitHub Repo
angular.module('sanMiguelApp')
.controller('Events',['$scope',function($scope){
$scope.eventname = [
{name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'},
{name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'},
{name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'},
{name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'},
{name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'}
];
}])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
<div class="row">
<div class="col-md-5">
<img ng-src="images/student.jpg" class="img-responsive thumbnail" alt="San-Miguel-Building">
</div>
<div class="col-md-7">
<div class = "motto text-center animated zoomIn">"Transforming lives throught education,commitment and love."</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="https://cdn1.iconfinder.com/data/icons/education-vol-2/48/074-512.png" alt="San Miguel">
<div class="caption">
<h3 class = "text-center">School Announcements</h3>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" ng-controller= "TabController">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="http://www.cogransystems.com/wp-content/uploads/2013/07/sports-icon.png" alt="...">
<div class="caption">
<h3 class = "text-center">Sports Schedule</h3>
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{active:isSet(1)}">
<a href ng-click="setTab(1)">Basketball</a>
</li>
<li role="presentation" ng-class="{active:isSet(2)}">
<a href ng-click="setTab(2)">Soccer</a>
</li>
<li role="presentation" ng-class="{active:isSet(3)}">
<a href ng-click="setTab(3)">Softball</a>
</li>
</ul>
<table class="table" ng-show="isSet(1)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Basketball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(2)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Soccer</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(3)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Softball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<!-- <div class="list-group text-center">
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball
</div> -->
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="thumbnail" ng-controller ="Events">
<img class = "img-responsive" style="height:100px" src="http://ketchikanpubliclibrary.org/wp-content/uploads/2014/10/events-calendar-icon-300x300.png" alt="...">
<div class="caption">
<h3 class = "text-center">Events</h3>
<div class="list-group text-center" ng-repeat = "events in eventname">
</i>{{events.name}}
<div class="modal fade" id="{{events.number}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{events.name}}</h4>
</div>
<div class="modal-body">
<div class = "row">
<div class = "col-md-12">
<img style = "height:150px,width: 50px"class = "img-responsive" src ="{{events.image}}"
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It probably has something to do with how you are injecting services into your various angular items. If you're not injecting with hard-coded strings at some point then minification is likely to break your app. I'd guess you know that already, but also that perhaps you missed one somewhere.
You can use syntax like:
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
or
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
The first method is less popular, but generally more preferred in terms of best practices.
I luckily found the solution why the modals weren't popping up. I had to omit "href" attribute in my anchor element. Since, I programmed my routing to "#/" for any unknown pages. That is the reason why it was taking me to a blank page rather than popping the bootstrap modal. Lesson learned!
</i>{{events.name}}
<a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>

Categories