I got somes problems with v-bind, it's not working

I got somes problems with v-bind, it's not working - javascript

I am learning VueJs but I kinda confused about v-bind! I have 4 buttons I want to have active class in the specific button when I click on that button but when I clicked on the button it looks like the method was not called! Example, If i click on home button the home button will have active class which will be changed to red. If i click on watch button the home button goes back to black and the watch button will be changed to red. But when I clicked on watch button everthing went to black. How can I fix it? Sorry for my english.
here is my vue.js file
new Vue({
el: "#center-element",
data: {
homeActive: true,
watchActive: false,
groupActive: false,
gameActive: false,
},
methods: {
homeActiveMethod: function () {
this.homeActive = true;
this.watchActive = false;
this.groupActive = false;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = true;
this.groupActive = false;
this.gameActive = false;
},
groupActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = true;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = false;
this.gameActive = true;
},
},
});
html
<ul class="navbar-nav nav nav-tabs mx-auto text-center" id="center-element">
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="homeActiveMethod" class="btn" v-bind:class="{active: homeActive}"
id="center-btn-nav">
<i class="fas fa-home"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="watchActiveMethod" class="btn" v-bind:class="{active: watchActive}"
id="center-btn-nav">
<i class="fas fa-play"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-users"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-gamepad"></i>
</button>
</a>
</li>
</ul>
css
.active{
color: red;
border-bottom: 5px;
border-bottom-style:solid;
border-bottom-color: red;
}

In Vue, you do not need to use <a> tags. Remove them and it will probably work.
By the way, you could significantly reduce the amount of code in your Vue component by using a single variable for currently active link:
data: {
activeLink: ""
},
methods: {
setActiveLink(activeLink) {
this.activeLink = activeLink;
}
},
<button v-on:click="setActiveLink('home')" class="btn" v-bind:class="{active: activeLink === 'home'}" id="center-btn-nav">
I would also suggest generating your <li> tags using a v-for directive.

Related

How can I maintain collapse-state of side bar after page refresh?

In my Sidebar I have included a collapse button to show/hide tabs. Now I want to maintain the collapse-state when refreshing the page: If the form was un-collapsed before refreshing the page, it must stay like this after the refresh. I am new to js. Below is my HTML:
<div class="sidebar">
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-database" data-bs-toggle="collapse"
data-bs-target="#button-1-collapse" aria-expanded="true">
Button-1
</button>
<div class="collapse" id="button-1-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-file-code-o" data-bs-toggle="collapse"
data-bs-target="#button-2-collapse" aria-expanded="true">
Button-2
</button>
<div class="collapse" id="button-2-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
Thanks for your help!

After some research, i have what i required. Attaching code part herewith which maybe beneficial to others.
$(function () {
const buttonCollapse1 = $("#button-1-collapse");
const buttonCollapse2 = $("#button-2-collapse");
buttonCollapse1.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "show");
});
buttonCollapse2.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "show");
});
buttonCollapse1.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "hide");
});
buttonCollapse2.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "hide");
});
const button1 = sessionStorage.getItem("buttonCollapse1");
if (button1 === "show") {
buttonCollapse1.collapse("show");
} else {
buttonCollapse1.collapse("hide");
}
const button2 = sessionStorage.getItem("buttonCollapse2");
if (button2 === "show") {
buttonCollapse2.collapse("show");
} else {
buttonCollapse2.collapse("hide");
}
});

Problem with adding click listener to list element in vue

I am fiddling around with vue, and for some reason am not able to add a click event listener to a <li>
HTML:
<div id="example">
<vue-navbar></vue-navbar>
<nav-drawer v-bind:open="open">
<div slot="drawer-content">
<ul class="nav flex-column" id="DrawerItems">
<li class="nav-item" v-on:click="DoShowHome">
<a class="nav-link" >
<i class="ion-ios-home"></i> Home
</a>
</li>
<li class="nav-item" v-on:click="DoShowStatistics">
<a class="nav-link" >
<i class="ion-stats-bars"></i> Statistics
</a>
</li>
<li class="nav-item" v-on:click="DoShowActivity">
<a class="nav-link" >
<i class="ion-flash"></i> Activity
</a>
</li>
<li class="nav-item" v-on:click="DoShowSettings">
<a class="nav-link" >
<i class="ion-gear-b"></i> Settings
</a>
</li>
</ul>
</div>
<div slot="main-content">
<div class="container-fluid">
<div class="row">
<div id="app-content">
<div v-if="ShowHome">ShowHome</div>
<div v-if="ShowStatistics">ShowStatistics</div>
<div v-if="ShowActivity">ShowActivity</div>
<div v-if="ShowSettings">ShowSettings</div>
</div>
</div>
</div>
</div>
</nav-drawer>
</div>
with the script.js containing the following vue component:
var example = new Vue({
el: '#example',
data: function(){
return {
open: true,
ShowHome: true,
ShowStatistics: false,
ShowActivity:false,
ShowSettings:false
}
},
created: function(){
messageBroker.$on('toggle-nav-drawer', this.toggleDrawer)
},
beforeDestroy: function() {
messageBroker.$off('toggle-nav-drawer', this.toggleDrawer)
},
methods: {
toggleDrawer: function() {
this.open = !this.open;
},
DoShowHome: function(event){
this.ShowHome = true;
this.ShowStatistics = false;
this.ShowActivity = false;
this.ShowSettings = false;
},
DoShowStatistics: function(event){
this.ShowHome = false;
this.ShowStatistics = true;
this.ShowActivity = false;
this.ShowSettings = false;
},
DoShowActivity: function(event){
this.ShowHome = false;
this.ShowStatistics = false;
this.ShowActivity = true;
this.ShowSettings = false;
},
DoShowSettings: function(event){
this.ShowHome = false;
this.ShowStatistics = false;
this.ShowActivity = false;
this.ShowSettings = true;
}
}
});
I am probably doing this wrong, but for the life of me after finding dozens of tutorials I am not able to reproduce a working onclick method. Console isn't telling me anything either.
The idea is that I will later create the content of the fields that are dependant on those "Show*" variables, and when i call the function from console by calling
example.DoShowActivity()
It does display the other div. What am i missing?

Jquery, can't update attribute previously created

I'm just trying to work on new slider menu but I've a problem with Jquery.
I've a link. When I click on I use .css('left', -230) and all is okay but when i want to reverse by another clicked link like .css('left', 0) nothing happen.
I show you some code :
// The open part "target.width()" = 230
$('.nav-item').on('click', function () {
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.css('left', -target.width());
}
});
// The close part
$('.navbar-nav__sub .go-back').on('click', function () {
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.css('left'));
target.css('left', 0);
console.log(target.css('left'));
console.log('END');
});
A strange thing in this problem is that I've this in my console :
HERE
Object { 0: ul.navbar-nav.flex-column, length: 1, prevObject: […] }
-230px
0px
END
It seem that the code work well but in my page the left attribute is always to -230px.
Someone have an idea ?
Thank you.
PS: As asked the JSfiddle who reproduce my problem
https://jsfiddle.net/w7Lknsxg/
If you click on "Menu01" Color turn to red and when you click on "<=" in submenu you have the execution in the console but the color don't change.
You can see the class navbar-nav get new class "toto" but don't lost when I try to remove it in the second case.

Because the .go-back is nested within the .nav-item you are firing both event listeners due to event bubbling. You can stop this with event.stopPropagation(); from within the listener placed on the child item. (or be more specific in what you target as not to include subelements)
var ftl = window.ftl || {};
ftl.navbar = {
config: {
targetName: '.nav',
target: null,
},
init: function init() {
this.config.target = $(this.config.targetName);
$('.navbar-toggle').on('click', function () { ftl.navbar.toggle(); });
$('.nav-item').on('click', function () {
if( !ftl.navbar.config.target.hasClass('open') ) {
ftl.navbar.open();
}
// test la présence d'un sous menu
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.addClass('toto');
target.css('color', 'red');
}
});
$('.navbar-nav__sub .go-back').on('click', function (event) {
event.stopPropagation();
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.hasClass('toto'));
target.removeClass('toto');
target.css('color', "green");
console.log('END');
})
},
open: function open() {
this.config.target.addClass('open').one('transitionend', function () {
ftl.navbar.config.target.addClass('opened');
});
},
close: function close() {
this.config.target.removeClass('opened')
.removeClass('open');
},
toggle: function toggle() {
if( this.config.target.hasClass('open') ) {
this.close();
} else {
this.open();
}
}
}
$(document).ready(function() {
ftl.navbar.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<nav class="navbar" role="navigation">
<div class="container-nav flex-column">
<div class="navbar__header">
<a href="#" class="no-style">
<i class="fa fa-comment-o fa-2x navbar__icon" aria-hidden="true"></i>
<span class="navbar__text"><strong class="text-primary">web</strong>tutu</span>
</a>
</div>
<div class="navbar__divider"></div>
<ul class="navbar-nav flex-column">
<li id="nav-item--one" class="nav-item">
<a href="#nav-item--one">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu01</span>
</a>
<ul class="navbar-nav__sub">
<li>link 01</li>
<li>link 02</li>
<li><a class="go-back" href="#"> <= </a></li>
</ul>
</li>
<li id="nav-item--two" class="nav-item">
<a href="#nav-item--two">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu02</span>
</a>
</li>
<li id="nav-item--three" class="nav-item">
<a href="#nav-item--three">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu03</span>
</a>
</li>
<li class="mt-auto">
<i class="fa fa-angle-double-right fa-2x navbar-toggle" aria-hidden="true"></i>
</li>
</ul>
</div>
</nav>
</nav>

Remove dynamic elements that were created after the dom was loaded

I have a series of fieldset elements that are hidden when all of the list items inside them are not visible. The problem is I want to actually remove the field sets after they slide up and are hidden but I'm having trouble getting that to work.
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterid).slideUp(function () {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// Hide `fieldset`
var parent = $(this).closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>
I've read that you can't use the jquery.click call in order to remove an element that was created after page load, so that's why I went with using the on call. But I'm having trouble getting it to work.

Try
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
// remove `fieldset` if all `li` siblings _not_ visible ,
// at `.hide()` `complete` callback
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
});
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
})
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>

This is what I would do:
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
liEl = $(e.currentTarget).parent();
var chapterID = $(e.currentTarget).attr('id').split('_').pop();
$('#chapter_'+chapterID).slideUp(function () {
if (!liEl.is(":visible")
&& !liEl.siblings(":visible").length > 0) {
// Hide `fieldset`
var parent = liEl.closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
http://jsfiddle.net/jplato/zp91wzc0/1/

Unable to change dynamically updated data-id

I am trying to dynamically change the data-id of anchor #a-flop. The issue is that the data-id is only changed once. I am unable to change the dynamically updated value.
HTML
<ul class="nav navbar-nav navbar-center">
<li class="dropdown">
<a id="a-flip" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-file-text m-r-10"></i>
Invoice
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a id="a-flop" data-id="1" href="javascript:void(0)">
<i class="fa fa-user m-r-10"></i>
Badge
</a>
</li>
</ul>
</li>
</ul>
JQUERY
<script>
$(document).ready(function(){
$(document).on('click', '#a-flop', function(){
$this = $(this);
alert($this.data('id'));
if ($this.data('id') == 0) {
$this.attr('data-id', 1);
} else {
$this.attr('data-id', 0);
}
});
});
</script>
FIDDLE LINK - http://jsfiddle.net/Lv37o8wu/

That is because you are setting the attribute value and not dom property. you should be using .data() to set the value as well:
$(document).on('click', '#a-flop', function(){
$this = $(this);
alert($this.data('id'));
if ($this.data('id') == 0) {
$this.data('id', 1);
} else {
$this.data('id', 0);
}
});
Working Demo

Develop Reference

JavaScript is the programming language of the Web.

I got somes problems with v-bind, it's not working - javascript

Related

How can I maintain collapse-state of side bar after page refresh?

Problem with adding click listener to list element in vue

Jquery, can't update attribute previously created

Remove dynamic elements that were created after the dom was loaded

Unable to change dynamically updated data-id

Categories

Resources