Hide Navigation Links in VueJs When Clicked - vue.js

I tried everything to make the navigation links hide when I clicked but it didn't worked. Here my Header.vue file.
<template>
<nav class="navbar is-dark is-fixed-top">
<div class="container">
<div class="navbar-brand">
<router-link to="/" class="navbar-item">
<img src="../../assets/logo.png" width="">
</router-link>
<a role="button"
:class="{ 'is-active': ShowMenu }"
class="navbar-burger burger"
#click="toggleMenu()"
aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div :class="{ 'is-active': ShowMenu }"
class="navbar-menu">
<div class="navbar-start">
<router-link to="/" class="navbar-item">Home</router-link>
<router-link to="/about" class="navbar-item">About</router-link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<router-link to="/login" class="button is-dark">
<span><i class="fa fa-lock"></i> Login</span>
</router-link>
</p>
<p class="control">
<router-link to="/register" class="button is-light">
<span><i class="fa fa-user"></i> Register</span>
</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</nav>
Here's the JS codes. Navigation are working when a click the links but the only problem I have is that it didn't automatically hide.
export default {
name: "Header",
data() {
return {
ShowMenu: false,
NavigationItems: true,
NavigationItems: false
}
},
methods: {
toggleMenu: function() {
this.ShowMenu = !this.ShowMenu
},
toggleNavItem: function() {
false
}
}
}

Try
<a v-if='!ShowMenu' role="button" ...
instead of using CSS

You shouldn't use v-if it will "kill" the element in the dom, but if you only want to toggle it use v-show width !ShowMenu like Steven explained.
And if you want to use a CSS class: do you have a class called is-active and is the default behavior of .burger display: none;? If you want to stay on this solution please provide us your CSS.

Related

Carousel bootstrap with vue js component

currently I'm creatting one component using Carousel With indicators GetBootstrap Carousel With indicators
I am implementing this code in one vue component, like:
<template>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<div v-for="(image, index) in images" :key="index">
<li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
</div>
</ol>
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index">
<div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
<img class="d-block w-100" :src="image.path" :alt="image.name">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</template>
<script>
export default {
props: ["app_route"],
data() {
return {
images: [],
};
},
mounted: function() {
this.getItemsSlider();
},
methods: {
getItemsSlider() {
axios
.get(this.app_route + "/admin/slider/list", {
})
.then((response) => {
//console.log("response: ", response.data);
this.images = response.data;
});
},
}
};
</script>
currently the first image is showing but the other images are not showing, the slider is not working too.
Why? what I'm doing wrong?
here is the code codesandbox
According to the documentation, there must be strictly nesting of elements .carousel-inner > .carousel-item.
You should try this:
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
<img class="d-block w-100" :src="image" :alt="image.name" />
</div>
</div>

Elements in iteration expect to have 'v-bind:key' directives

I am really new in Vue and I am getting this error in my code which is quite basic navbar
<template>
<nav
class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block"
id="templatemo_nav_top"
>
<div class="container text-light">
<div class="w-100 d-flex justify-content-between">
<div v-for="info in contactInfos">
<i :class="{info.icon}"></i>
<a class="navbar-sm-brand text-light text-decoration-none" href="#">{{info.contact}}</a>
</div>
<div>
<a class="text-light" href="#" target="_blank" rel="sponsored"
><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-instagram fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-twitter fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-linkedin fa-sm fa-fw"></i
></a>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
contactInfos: [
{ icon: 'fa fa-envelope mx-2', contact: 'info#company.com'},
{ icon: 'fa fa-phone mx-2', contact: '000-000-0000'},
]
};
},
};
</script>
So I dont know what I am doing wrong, I basically want to show contact info inside the div.
Thanks...

How to add vue #click event in tooltip title content?

I will need to add #click event handler to the tooltip content. so the user can click on the tooltip to get more details.
simply writing #click will not work.
Vue full Calendar code here I use the eventRender event to attach the tooltips.
<FullCalendar
ref="fullCalendar"
:customButtons="this.customButtons"
:eventLimit="this.config.eventLimit"
:header="false"
:events="events"
:plugins="calendarPlugins"
:defaultDate="date"
#datesRender="setDatepickerValue"
#eventRender="getEventDetailsPopup"
defaultView="dayGridMonth"
/>
and the event rendered event handler code mentioned below
methods: {
getEventDetailsPopup: function(mouseInfo) {
var tooltip = new Tooltip(mouseInfo.el, {
title: `
<div class="container max-w-sm mx-auto overlay cursor-pointer rounded">
<div class="centered flex items-center m-4 w-full ">
<div class="w-1/3 h-12 ">
<i class="fa fa-heart" aria-hidden="true"></i>
<span class="text-white">0</span>
</div>
<div class="w-1/3 h-12">
<i class="fa fa-comment" aria-hidden="true"></i>
<span class="text-white">0</span>
</div>
<div class="w-1/3 h-12">
<i class="fa fa-retweet" aria-hidden="true"></i>
<span class="text-white">0</span>
</div>
<div class="w-1/3 h-12 ">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
<span class="text-white">0</span>
</div>
</div>
</div>
<div class="container bg-white max-w-1 mx-auto">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img
class="w-full h-32"
src="https://tailwindcss.com/img/card-top.jpg"
alt="Sunset in the mountains"
>
<div class="px-6 py-4 ">
<div class="font-bold text-xl mb-2">${mouseInfo.event.title}</div>
<p class="text-gray-700 text-base">
${mouseInfo.event.extendedProps.description}
</p>
</div>
<div class="px-6 py-2 bg-blue-900 h-9">
<span class="inline-block bg-gray-200 rounded-full px-3 text-sm font-semibold text-gray-700 mr-2">
Autoschedule</span>
</div>
</div>
</div>`,
placement: "right",
trigger: "hover",
html: true,
container: "body",
delay: { show: 100 },
template: `<div class="tooltip calendar" role="tooltip">
<div class="tooltip-arrow x-arrow"></div>
<div class="tooltip-inner"></div>
</div>`
});
},
callEventDetailPopup: function() {
console.log("called");
},
Need to add a click handler on the title content.
try this
<FullCalendar #eventClick="eventClick" />

passing data between components not working

i have been struggling for hours on this one, i am a newbie in vuejs basically i have a modal based on tabs and i want to show some data into the modal-content of my modal, the place where click event of open modal occurs is in another vue file and the place where i want to populate the modal content is in another vue,here's my code
main blade file
#section('main-content')
<div class="full-page-taps">
<div class="page-head p-4 mb-lg-4">
<h3>Directory</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<employee-search :inplaceholder="'Search Techs'"></employee-search>
</div>
</div>
<employee-card-section :indata="{{ $employees }}"></employee-card-section>
</div>
<modal name="employee-modal"
:width="'94%'"
:height="'94%'"
>
<employee-modal-content v-on:custom="customHandler"></employee-modal-content>
</modal>
</div>
#endsection
employeecard.vue
methods: {
openEmployee() {
// if(this.viewEmployees) {
this.$modal.show('employee-modal');
// this.$emit("passdata",this.employee.id);
this.$emit('chalja');
// this.$emit('custom', 'somedata');
// this.$eventHub.$emit("passdata");
// })
// }
}
},
employee-modal-content.vue
<template>
<div>
<div class="secondary-header no-margin">
<h2>UNEEB</h2>
</div>
<div class="customer-panel">
<input type="hidden" id="eid" value="" />
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#bio" role="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#audit" role="tab">Audit</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="profile" role="tabpanel">
</div>
<div class="tab-pane" id="bio" role="tabpanel">
</div>
<div class="tab-pane" id="audit" role="tabpanel">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods:{
customHandler : function(e){
console.log(e);
console.log("works");
}
},
mounted(){
this.$eventHub.$on('chalja', ()=> {
alert("agya");
});
}
}
</script>
i basically want to pass in the ID from employeecard.vue to directory-modal-content.vue. i have tried many solutions but none worked for me, any help?
Should be so:
1.Pass your id as dynamic prop of component
<employee-modal-content :id="employee.id"></employee-modal-content>
2.In your child component u have to use props to receive the id variable
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
methods:{
//...
}
}
</script>

Vue 2.x authentication links not hiding until page refresh

I am new to Vue and created a basic authentication application.
AuthService.js
module.exports = {
isLoggedIn: function() {
if (localStorage.getItem("authUser") != null) {
return true;
} else {
return false;
}
},
Logout: function() {
localStorage.removeItem("authUser");
},
}
App.vue
<template>
<div id="app" >
<top-progress ref="topProgress"></top-progress>
<div class="nav is-light is-fixed-top">
<div class="container">
<span class="nav-toggle" v-on:click="toggleNav" v-bind:class="{ 'is-active': isActive }">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu" v-bind:class="{ 'is-active': isActive }">
<router-link v-ripple to="/" class="nav-item r-item"><i class="fa fa-home"></i>Home</router-link>
<router-link v-ripple to="faq" class="nav-item r-item"><i class="fa fa-file"></i>Features</router-link>
<router-link v-ripple to="dashboard" class="nav-item r-item"><i class="fa fa-dashcube"></i>Dashboard</router-link>
<router-link v-ripple to="faq" class="nav-item r-item"><i class="fa fa-quora"></i>Faq</router-link>
<a class="nav-item r-item" v-if="LoggedIn"><i class="fa fa-sign-out" #click.prevent="Logout"></i>Logout</a>
<div class="nav-item" v-if="!LoggedIn">
<p class="control">
<router-link to="login" class="button is-primary is-outlined">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span> Join Now</span>
</router-link>
</p>
</div>
</div>
</div>
</div>
<br>
<router-view></router-view>
<footer class="footer is-secondary">
<div class="container">
<div class="columns">
<div class="column">
<p>And this right here is a spiffy footer, where you can put stuff.</p>
</div>
<div class="column has-text-right">
<a class="icon" href="#"><i class="fa fa-facebook"></i></a>
<a class="icon" href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
import {isLoggedIn,Logout} from "./service"
import miniToastr from 'mini-toastr'
import topProgress from 'vue-top-progress'
export default {
name: 'app',
components:{topProgress},
data:function(){
return {
isActive:false,
LoggedIn:false,
}
},
created(){
this.LoggedIn=isLoggedIn();
},
mounted(){
miniToastr.init()
this.$refs.topProgress.start()
setTimeout(() => {
this.$refs.topProgress.done()
}, 2000)
},
methods:{
Logout:function(){
Logout();
this.$router.push("login");
},
}
}
</script>
<style lang="sass">
..//
</style>
After successful login, I am using this.$router.push("home") to navigate to home component but the Login/Logout button not hiding/showing until I refresh the page.
The problem you are having is the created: hook is only called when App.vue is first created. Since this component holders the router-view it is always there as you move around the app — it's never destroyed, so it never needs to be created again. As a result your this.LoggedIn is only updated when you first load the app (or as you discovered, hit refresh).
You need to find a different way to update this.LoggedIn. One obvious possibility it to set it in the logih/logout methods.
Logout:function(){
Logout();
this.LoggedIn = isLoggedIn(); // or simply this.LoggedIn = false
this.$router.push("login");
},
It looks like users will login in a different component, so you will need to send an event from the child component to App.vue and trigger a method on App.vue to set this.LoggedIn when users login.
There are probably other possibilities that will come to mind now that you see why it isn't working.