This is my html code:
<nav class="nav nav-pills">
<li class="active text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/mantee.svg') }}" alt="Camisetas Hombre">
<div>
<span>hombre</span>
</div>
</li>
<li class="text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/womantee.svg') }}" alt="Camisetas Mujer">
<div>
<span>mujer</span>
</div>
</li>
<li class="text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/babytee.svg') }}" alt="Body bebé">
<div>
<span>bebé</span>
</div>
</li>
</nav>
I need the active class dynamic in my nav pills li items.
How can I do it with vuejs 2?
<li class="text-center" :class={active: isActive} >
This basically says if this.isActive === true then the class "active" will be applied.
You have to set a property in your data object called isActive, and toggle it with javascript. When it is true, it will apply your class, when it it is false, it wont.
Related
I am using jquery SmartWizard control and want to show the toolbar vertically with the content for each tab to the right.However hen I run the below code, I get the error 'Element not found .nav'. What am I doing wrong? Any help is appreciated. Is it possible to make smartwizard show vertically with tab content to the side.
#model ApplicationViewModel
<div id="smartwizard">
<h3>Application</h3>
<div class="row">
<div class="col-3">
<ul class="nav flex-column nav-pills">
<li>
<a class="nav-link" href="#step-1">
Personal Information
</a>
</li>
<li>
<a class="nav-link" href="#step-2">
Education
</a>
</li>
<li>
<a class="nav-link" href="#step-3">
Professional Experience
</a>
</li>
<li>
<a class="nav-link" href="#step-4">
Business and Finanical Information
</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">
<partial name="_PersonalInfo" model="Model" />
</div>
<div id="step-2" class="tab-pane" role="tabpanel">
Education
</div>
<div id="step-3" class="tab-pane" role="tabpanel">
Professional Experience
</div>
<div id="step-4" class="tab-pane" role="tabpanel">
Business and Finanical Information
</div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$(document).ready(function () {
// SmartWizard initialize
$('#smartwizard').smartWizard({
toolbarSettings: {
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: false, // show/hide a Previous button
toolbarExtraButtons: [$('<button></button>').text('Save')
.addClass('btn btn-info')
] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
}
});
});
</script>
}
I am using getuikit's tab component ( https://getuikit.com/docs/tab ) in my Vue-App:
Now I see that every tab is active, if I use v-for to iterate through an array.
<ul class=" uk-tab-left" uk-tab>
<li v-for="test in tests" id="test">{{ test }}</li>
</ul>
In my codepen example you can see, that the class uk-active is always inserted automatically:
https://codepen.io/spqrinc/pen/Ydzbez
Is there a possibility to change this behavior?
You can add a empty li element before the loop to make sure the active class will not be added to the others.
Don't forget to add a key to the loop and bind the id.
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<li></li>
<li v-for="test in tests" :key="test" :id="test">
{{ test }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<template v-for="test in tests">
<li :key="test" :id="test">
{{ test }}
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
I was trying to move the some functionality which is the Drop down of the Laravel Spark at the NavBar to my app.blade.php .
my code looks like this
<body class="skin-1">
<!-- Wrapper-->
<div id="spark-app" v-cloak>
<!-- Navigation -->
#include('layouts.wf_navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
#yield('content')
<!-- Footer -->
#include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
#show
<script src="/js/app.js"></script>
but I am getting an error
Uncaught ReferenceError: Bus is not defined
the error is referencing to this line of code in APp.js
Bus.$on('updateUser', function () {
self.getUser();
})
UPDATE
The Bus variable is defined in the App.js itself the code looks like this
if (window.Vue === undefined) {
window.Vue = __webpack_require__(287);
window.Bus = new Vue();
}
note: the previous issue got fixed by removing the the extra Vuejs file which was included in the top of my app.blade.php
Update 1
There is new error
[Vue warn]: Templates should only be responsible for mapping the state
to the UI. Avoid placing tags with side-effects in your templates,
such as .
the templates which are being included are
wf_navigation.blade.php
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" method="post" action="/">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search" />
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<?php $currentTeam = auth()->user()->currentTeam; ?>
#if($currentTeam)
<li>
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ $currentTeam->name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Profile
</li>
<li>
Members
</li>
<li>
Subscription
</li>
<li>
Invoices
</li>
#include('spark::nav.teams')
</ul>
</li>
#endif
</ul>
</nav>
</div>
Which is calling #include('spark::nav.teams')
the teams.blade.php looks like this
<li class="dropdown-header">{{ ucfirst(str_plural(Spark::teamString())) }}</li>
<!-- Create Team -->
#if (Spark::createsAdditionalTeams())
<li>
<a href="/settings#/{{str_plural(Spark::teamString())}}">
<i class="fa fa-fw fa-btn fa-plus"></i>Create {{ ucfirst(Spark::teamString()) }}
</a>
</li>
#endif
<!-- Switch Current Team -->
#if (Spark::showsTeamSwitcher())
<li v-for="team in teams">
<a :href="'/{{ str_plural(Spark::teamString()) }}/'+ team.id +'/switch'">
<span v-if="user.current_team_id == team.id">
<i class="fa fa-fw fa-btn fa-check text-success"></i>#{{ team.name }}
</span>
<span v-else>
<img :src="team.photo_url" class="spark-team-photo-xs"><i class="fa fa-btn"></i>#{{ team.name }}
</span>
</a>
</li>
#endif
<li class="divider"></li>
'footer.blade.php'
<div class="footer">
<div class="pull-right">
V4.0
</div>
<div>
<strong>Powered By</strong> Energy Engine © 2010-2017
</div>
</div>
I am new to vue so no idea whats happening there
Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only one div while page is loading, but without v-cloak?
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
This might be happening because of other errors in your code, like:
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.
See modified code:
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
<img :src="home_asset('img/very_big_user_icon.png')" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
I am looking at a way to add a class dynamically to aurelia template. I have to add an active class if the particular li is visible.
Example
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}">
<ul *ngFor = "#item of slide">
<li class="jobDetails" *ngFor="#job of item; #i = index">
<div>
<span id="{{job.name}}" class="jobName">{{ job.name }}</span>
</div>
<div>
<span>{{job.noOfJobs}}</span>
</div>
</li>
</ul>
</div>
<div>
Previous
Next
</div>
</section>
I want to add the active class on below code
<div class="phs-widget-body">
<div class="phs-carousel-inner">
<ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" >
<li repeat.for = "item of slide" class="phs-small-6">
<a href="javascript:void(0)">
<div class="phs-job-title">${item.title}</div>
<div class="phs-job-info">
<span class="phs-job-loacation">${item.location}</span>
<span class="phs-job-category">${item.category}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="phs-widget-footer">
<a class="left" href="#phsNearbyJobs" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i> Move to Previous
</a>
<ol class="phs-carousel-indicators">
<li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li>
</ol>
<a class="right" href="#phsNearbyJobs" role="button" data-slide="next">
Move to Next <i class="fa fa-angle-right"></i>
</a>
</div>
As well how do I pass an event Object on aurelia?
Just use interpolation
<div class="${ applyMyClass ? 'my-class' : '' }">
E.g.
<div class="${ carouselIndex == $index ? 'active' : '' }">
You don't need to do this with a click event, it's the same as ng2 (only less code!)