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...
Related
I am quite new in vue and I am trying to make a bootstrap carousel using bootstrap.
<template>
<!-- Start Banner Hero -->
<div
id="webshop-hero-carousel"
class="carousel slide"
data-bs-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="0"
class="active"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="1"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" v-for="picture in pictures" :key="'picture-' + picture.id">
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<!-- <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1> -->
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev text-decoration-none w-auto ps-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="prev"
>
<i class="fas fa-chevron-left"></i>
</a>
<a
class="carousel-control-next text-decoration-none w-auto pe-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="next"
>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<!-- End Banner Hero -->
</template>
<script>
export default {
data() {
return {
pictures: [
{
id: 1,
text: "Freibad",
},
{
id: 2,
text: "Hallenbad",
},
],
};
},
};
</script>
So here is my component but it doesnt work properly. I basically just want to show {{picture.text}} on each carousel but it doesnt display anything properly.
None of the carousel-item elements are active.
You can control the "active" item programmatically using Vue. Here is one example:
new Vue({
el:"#app",
data: () => ({
pictures: [ { id: 1, text: "Freibad" }, { id: 2, text: "Hallenbad" } ],
active: 0
}),
methods: {
setActive(index) {
let active = index;
if(index === this.pictures.length) active = 0;
else if(index === -1) active = this.pictures.length - 1;
this.active = active;
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="webshop-hero-carousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="0"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="1"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div
v-for="(picture, index) in pictures"
:key="'picture-' + picture.id"
:class="{ 'carousel-item': true, 'active': index === active }"
>
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#webshop-hero-carousel" role="button" data-bs-slide="prev" #click="setActive(active-1)">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-control-next text-decoration-none w-auto pe-3" href="#webshop-hero-carousel" role="button" data-bs-slide="next" #click="setActive(active+1)">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
I would also suggest taking a look at bootstrap-vue.
Hi i am a newbie in vuejs, Buefy. I wanted to add navigation bar. Navigation Bar works in the desktop however when view it in mobile responsive when the burger click doesn't show anything. the navbar item not collapsible. can anyone help me? Thank you.
Here is my code.
<template>
<div id="app">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "App",
mounted() {
$(document).ready(function() {
document.addEventListener("DOMContentLoaded", () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
});
});
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Can access here:
https://codesandbox.io/s/stupefied-khayyam-mnb7x
Well, the way you trying to do it is a bit different from the official documentation. In order to create a navbar you should wrap your whole navbar within a <b-navbar> like this:
<b-navbar>
<template slot="brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
</template>
<template slot="start">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
</template>
<template slot="end">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</template>
</b-navbar>
Then fill each slot with appropriate content of yours.
Working DEMO:
When loading the panels the first time and opening the panel in the third position. Everything is Ok.
When loading more elements, the panel that opens is not correct but it is still the one in the third position.
<div id="load-conversation">
<div class="row" style="margin-bottom: 10px;" v-show="referencesList.length >0">
<div class="col-md-12 text-center">
<button v-on:click="getEmails" class="btn btn-sm btn-blue">Cargar más</button>
</div>
</div>
<div class="panel panel-info" v-for="email in emails">
<!-- Head Panel-->
<div class="panel-heading" v-bind:class=" email.incoming ? 'white-inbox' : 'blue-reply'"
data-toggle="collapse" :href="`#collapse-new${email.id}`">
<!--Email Title-Button -->
<div class="row">
<div class="col-md-8">
<h5 v-if="email.incoming"><span class="fas fa-reply" aria-hidden="true"></span> ${email.sender_name}</h5>
<h5 v-else><span class="fas fa-share-square" aria-hidden="true"></span> ${email.sender_name}</h5>
</div>
</div>
</div>
<!--Body Panel-->
<div :id="`collapse-new${email.id}`" class="panel-collapse collapse">
<div class="panel-body">
<!--Email Head-->
<div class="container-fluid">
<div class="row">
<strong>SUBJECT: </strong><span class="text-info">${email.subject}</span></br>
<strong>FROM: </strong><span class="text-info">${email.sender_email}</span></br>
<strong>TO: </strong><span class="text-info"><span v-for="to in email.to">${to.email}, </span></span></br>
<strong>DATE: </strong><span class="text-info">${email.date}</span></br>
<strong v-if="email.cc.length > 0">CC: </strong><span class="text-info"><span v-for="cc in email.cc">${cc.email}, </span></span>
</div>
</div>
<br>
<!--Email Body-->
<div class="row container-fluid">
<div class="list-group-item"v-html="email.content_html">
</div>
<div>
<div class="bs-component">
<ul class="pager">
<li class="previous" data-toggle="collapse" :data-target="`#open-details-new${email.id}`">
<a href="javascript:void(0)">
<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
<div :id="`open-details-new${email.id}`" class="collapse" v-html="email.complete_html">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The important thing is to see that the new elements are placed in the order of the old elements, that is, the order is reversed in the list. By only adding the elements without changing the order everything works correctly.
<script>
var loadMore = new Vue({
el: '#load-conversation',
delimiters: ['${', '}'],
data: {
limit : 3,
referencesList : [1,2,3,4,5],
emails : [],
showLoadBtn: true,
},
mounted() {
this.getEmails()
},
methods: {
getEmails(){
axios.post("get_more_emails", { references: this.getReferences() })
.then(response => {
//console.log(response.data);
this.emails = [ ...response.data, ...this.emails ]
}).catch(function (error) {
console.log('error', error)
});
},
getReferences(){
...
}
},
})
</script>
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" />
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.