As the title implies I want to add two modal dialog's on one page.
I figured out how to create on but the second one I am having troubles with.
HTML:
<body>
<h1>-projects-</h1>
<ul id="button-container">
<li>
<a id="html-modal-button" #click="showModal = true">
<img class="htmllogo" src="images/HTMLLogo.png">
<div class="html-text-block">
<h2>HTML</h2>
<p>My web projects</p>
</div>
</a>
<htmlmodal v-if="showModal" #close="showModal = false"></htmlmodal>
</li>
<li>
<a id="cs-modal-button" #click="showModal = true">
<img class="csharplogo" src="images/CSHARPLogo.png">
<div class="cs-text-block">
<h2>C#</h2>
<p>My windows projects</p>
</div>
</a>
<csmodal v-if="showModal" #close="showModal = false"></csmodal>
</li>
</ul>
<!-- MODAL SECTION -->
<script type="text/x-template" id="html-modal-template">
<transition name="html-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">HTML HEADER</slot>
</div>
<div class="modal-body">
<slot name="body">HTML BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">HTML FOOTER
<button class="modal-default-button" #click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="cs-modal-template">
<transition name="cs-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">CS HEAD</slot>
</div>
<div class="modal-body">
<slot name="body">CS BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">CS FOOTER
<button class="modal-default-button" #click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
</body>
</html>
VUE.JS:
$(window).load(function(){
// CREATE THE DOM COMPONENT
Vue.component('htmlmodal', {
template: '#html-modal-template',
});
Vue.component('csmodal', {
template: '#cs-modal-template',
});
// START THE APP
new Vue({
el:'#button-container',
data: {
showModal: false
}
})
});
**The Fiddle: ** https://jsfiddle.net/oz053uzj/
As you can see I have separated the modal section, so essentially I could simply create and edit a modal, create a vue.component and reference it.
The problem comes when I try to open the modal, it seem's to only open the second or last modal for each of the buttons, I presume its due to #click="showModal = <>" is same for both the modals, but I'm left clueless..
because their v-if is based on the same data showModal.
If showModal is true, both will be displayed. And the last one will be on top.
So how about differentiating them based on a string instead of true/false ?
<a id="html-modal-button" #click="showModal = 'html-modal'">
and
<htmlmodal v-if="showModal === 'html-modal'" ...
?
demo: https://jsfiddle.net/jacobgoh101/oz053uzj/1/
You should use two different variable for two modal.
HTML:
<body>
<ul id="button-container">
<li>
<a id="html-modal-button" #click="showModal = true">
First Modal
</a>
<htmlmodal v-if="showModal" #close="showModal = false"></htmlmodal>
</li>
<li>
<a id="cs-modal-button" #click="showCsModal = true">
Second Modal
</a>
<csmodal v-if="showCsModal" #close="showCsModal = false"></csmodal>
</li>
</ul>
<!-- MODAL SECTION -->
<script type="text/x-template" id="html-modal-template">
<transition name="html-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">HTML HEADER</slot>
</div>
<div class="modal-body">
<slot name="body">HTML BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">HTML FOOTER
<button class="modal-default-button" #click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="cs-modal-template">
<transition name="cs-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">CS HEAD</slot>
</div>
<div class="modal-body">
<slot name="body">CS BODY</slot>
</div>
<div class="modal-footer">
<slot name="footer">CS FOOTER
<button class="modal-default-button" #click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
</body>
VUE.JS:
new Vue({
el:'#button-container',
data: {
showModal: false,
showCsModal: false,
}
})
**The Fiddle: ** https://jsfiddle.net/tanvir86/od2cjtkc/
Related
I am in a javascript beginner class and I am stuck with my homework. I went over it what feels like a million times but for some reason, I am missing something and I can't find it. Many thanks in advance!!! It is set up so that if the link has the data-reveal attribute and there is a modal element with the matching ID it will allow for that link to be clicked and the modal appears.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, shrink-to-fit=no">
<meta name="description" content="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>London</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/london.css">
</head>
<!-- Head End -->
<body>
<header id="header" class="header">
<!-- Image Banner -->
<div id="logoWrapper" class="logoWrapper">
<img src="images/welcometoengland.png" class="logo" title="Welcome to England" alt="Welcome to England">
</div>
<section id="banner" class="banner">
<img src="images/banner/london_banner_1.png" class="banner__image" alt="banner">
</section>
<!-- Primary navigation -->
<nav id="nav" class="nav">
<ul class="nav__links nav__items">
<li class="nav__item">
Home
</li>
<li class="nav__item">
London
</li>
<li class="nav__item">
Daytrips
</li>
<li class="nav__item">
Cost
</li>
<li class="nav__item">
Stay
</li>
<li class="nav__item">
Travel
</li>
<li class="nav__item">
Shop
</li>
<li class="nav__item">
Contact Us
</li>
</ul>
</nav>
</header>
<!-- Header End -->
<main id="main" class="main">
<!--Left Content -->
<div id="main__content" class="main__content">
<div class="intro__wrapper">
<div class="intro__left">
<h4 id="attractionLinks__heading" class="attractionLinks__heading"></h4>
<ul id="attractionLinks__list" class="attractionLinks__list"></ul>
<p class="attractionLinks__instructions">If you have already visited some attractions or would like to add additional attractions, click the button below to update your preferences:</p>
<button id="attractionLinks__showForm" class="attractionLinks__showForm">Select Attractions</button>
</div>
<div class="intro__right">
<h3 class="intro__heading">Welcome to the Lodon Attractions page!</h3>
<p class="intro__text"> As a current memeber of the International Travel Club, you may select the attractions you would like to visit and we will keeo you updated with travel tips. When you click the London tab, you will only see links to attractions you would like to visit.</p>
<div class="form__inputWrapper">
<form class="form travelerForm" id="travelerForm" name="travelerForm">
<div class="form__inputWrapper">
<label for="fullName" class="form__label">Full Name:</label>
<input name="fullName" id="fullName" class="form__input" type="text" pattern="^[A-Za-z]+\s[A-Za-z]+$" placeholder="" required>
</div>
<div class="form__inputWrapper form__inputWrapper--checkboxes">
</div>
<!--Submit-->
<div class="form__inputWrapper form__inputWrapper--submit">
<input name="submitTraveler" id="submitTraveler" class="submit button" type="submit" value="Submit Form">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="main__sidebar" class="main__sidebar">
<!--London Clock-->
<div id="londonTime__wrapper" class="londonTime__wrapper">
<img class="londonTime__image" src="images/bigben.png" alt="Big Ben Clock">
<p id="londonTime" class="londonTime"></p>
</div>
<!--Attractions Select Wrapper-->
<div id="attractions" class="attractions">
<div class="attractions__instructionsWrapper">
<!--Attractions Instructions-->
<h2 class="attractions__heading">
Select an item from the list to display a picture and description of the attraction.
</h2>
</div>
<!--Attractions Select Wrapper-->
<div class="attractions__selectWrapper">
<select id="attractions__list" class="attractions__list">
</select>
</div>
<!--Attractions Display Wrapper-->
<div class="attractions__displayWrapper">
<div class="attractions__imageWrapper">
<img src="images/slideshow/placeholder.jpg" class="attractions__image" alt="Attractions">
</div>
</div>
<!--Attractions Text Wrapper-->
<div class="attractions__textWrapper">
<p class="attractions__text"></p>
</div>
</div>
<!--Attractions End-->
</div>
<section class="modals">
<!--Big Ben Modal-->
<div id="BigBen_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Big Ben</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BigBen.jpg" alt="Big Ben">
</div>
<div class="modal__textWrapper">
<p class="modal__text">Whenever you think of London, you probably think of Big Ben, as it is one of England's most recognized landmarks.</p>
<p class="modal__text">Here are some <em>Quick Facts</em> about Big Ben:</p>
<p class="modal__text">Description: Big Ben is not actually the clock tower. It is the largest of the five bells inside of the clock tower</p>
<p class="modal__text">Location: It is at the House of Parliament in Westminster, London</p>
<p class="modal__text">Constructed; Completed in 1856, it took 13 years to build. It is about 315 feet high and hs 400 steps to reach the top</p>
<p class="modal__text">Tourists: Bet you didn't know that foreign tourists are not allowed to climb the 400 steps to the top of the tower, but native Englanders can arrange a tour through a member of parliament or a Lord. Please note that it is not wheelchair accessible.</p>
<p class="modal__text">Cost: Free</p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Zoo Modal-->
<div id="LondonZoo_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Zoo</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londonzoo.jpg" alt="London Zoo">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--St. Paul's Cathedral Modal-->
<div id="StPaulsCathedral_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">St. Paul's Cathedral</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/StPaulsCathedral.jpg" alt="St. Paul's Cathedral">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Tower of London Modal-->
<div id="TowerofLondon_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Tower of London</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/toweroflondon.jpg" alt="Tower of London">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--British Museum Modal-->
<div id="BritishMuseum_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">British Museum</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BritishMusuem.jpg" alt="British Museum">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Eye Modal-->
<div id="LondonEye_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Eye</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londoneye.jpeg" alt="London Eye">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Aquarium Modal-->
<div id="LondonAquarium_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Aquarium</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/London Aquarium.jpg" alt="London Aquarium">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Westminster Abbey Modal-->
<div id="WestminsterAbbey_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Westminster Abbey</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WestminsterAbbey.jpg" alt="Westminster Abbey">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Thames River Cruise Modal-->
<div id="ThamesRiverCruise_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Thames River Cruise</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/ThamesRiverCruise.jpg" alt="Thames River Cruise">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Wellington Arch Modal-->
<div id="WillingtonArch_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Wellington Arch</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WellingtonArch.jpg" alt="Wellington Arch">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Harrods Modal-->
<div id="Harrods_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Harrods</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Harrods.jpg" alt="Harrods">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Shopping Modal-->
<div id="Shopping_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Shopping</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Shopping.jpg" alt="Shopping">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
</section>
</main>
<!-- Main End -->
<footer id="footer" class="footer"></footer>
<!--Footer End -->
<script src="scripts/cookies.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/select_list.js"></script>
<script src="scripts/banner.js"></script>
<script src="scripts/london.js"></script>
<script>displayLondonTime();</script>
</body>
</html>
Here is my Javascript:
const LondonAttractions = {
LondonZoo: "London Zoo",
BigBen: "Big Ben",
StPaulsCathedral: "St. Paul's Cathedral",
TowerofLondon: "Tower of London",
BritishMuseum: "British Museum",
LodonEye:"London Eye",
LondonAquarium: "London Aquarium",
WestminsterAbbey: "Westminster Abbey",
ThamesRiverCruise: "Thames River Cruise",
WellingtonArch: "Willington Arch",
Harrods: "Harrods",
Shopping: "Shopping"
};
const travelerForm = document.getElementById('travelerForm');
const travelerFormCheckboxWrapper = document.querySelector('#travelerForm .form__inputWrapper--checkboxes');
const attractionLinksHeading = document.getElementById('attractionLinks__heading');
const attractionLinksList = document.getElementById('attractionLinks__list');
const attractionLinksButton = document.getElementById('attractionLinks__showForm');
function generateCheckboxes() {
//If all the required parts exist
if(travelerForm && travelerFormCheckboxWrapper){
//For each daytrip in daytripsInfo
for(let key in LondonAttractions){
let checkbox = `
<div class="form__checkboxWrapper">
<label for="${key}" class="form__label">${LondonAttractions[key]}</label>
<input id="${key}" name="${key}" class="form__input" type="checkbox" placeholder="">
</div>
`;
travelerFormCheckboxWrapper.insertAdjacentHTML('beforeend', checkbox);
}//End of Foor Loop
} //End of if statement
} //End of function
generateCheckboxes();
if(travelerForm) {
travelerForm.addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
var numChecked = 0;
const checkboxes = document.querySelectorAll('#travelerForm [type="checkbox"]');
// Loop over checkboxes
for(let i = 0; i < checkboxes.length; i++) {
// Check if the checkbox is checked
if(checkboxes[i].checked === true) {
// Increment numChecked variable
numChecked++;
//Set a cookie using the checkbox name
Cookies.set(checkboxes[i].name, true, {expires: 7});
}
//If a checkbox is not selected
else{
//If a cookie exists for that checkbox
if(Cookies.get(checkboxes[i].name)) {
//Delet the Cookie
Cookies.remove(checkboxes[i].name);
}
//Note: An alternative would be to set the cookie value to 'false'
//Cookies.set(checkboxes[i].name, false, { expires: 7});
}
}
if(numChecked > 0 && travelerForm.checkValidity()) {
Cookies.set('travelerName', travelerForm.fullName.value, { expires: 7});
// Submit the form
travelerForm.submit();
// Reset numChecked variable
numChecked = 0;
}
else if(numChecked === 0) {
alert('You must select at least one London attraction!');
}
});
}
//If both the 'travelerName' cookie and the attraction links heading exist
if(Cookies.get('travelerName') && attractionLinksHeading){
attractionLinksHeading.textContent = `Attraction Links for ${Cookies.get('travelerName')}`;
} else if(attractionLinksHeading) {
attractionLinksHeading.textContent = "Attraction Links";
}
if(attractionLinksList && travelerForm) {
//Show form by default
var showForm = true;
//For each of our attractions
for(let key in LondonAttractions) {
//If the cookie name esists
if(Cookies.get(key)) {
//Create our list item and link
let item = `<li class="attractionLinks__item">
<p data-reveal="${key}_modal" aria-controls="${key}" aria-haspopup="true" class="attractionLinks__link" role="button" tabindex="0">${LondonAttractions[key]}</p>
</li>`;
//Add the list item and link to the list
attractionLinksList.insertAdjacentHTML('beforeend', item);
//They have already submitted their preferences, hide from for now
showForm = false;
}
}
if(showForm === false) {
//Add modifier class that will be used to hide the form
travelerForm.classList.add('--hide');
}
const attractionLinks = document.querySelectorAll('.attractionLinks__link');
if(attractionLinks.length > 0) {
//If at least one link exists
for(let i = 0; i < attractionLinks.length; i++) {
//Get link data-reveal attribute
let id = attractionLinks[i].dataset.reveal;
//If the link has the data-reveal attribute, and there is a modal element with that matching ID
if(id && document.getElementById(id)) {
let modal = document.getElementById(id);
let closeButton = modal.querySelector('.modal__close');
//Add click event listner to link
attractionLinks[i].addEventListener('click', function(event) {
//If the modal exists and it does not have the --reveal class
if(!modal.classList.contains('--reval')) {
modal.classList.add('--reval');
}
});
//If close button exists within modal
if(closeButton) {
//Add click event listner to close button
closeButton.addEventListener('click', function(event) {
//If the modal had the --reveal class
if(modal.classList.contains('--reveal')) {
//Remove it (hides the modal)
modal.classList.remove('--reveal');
}
});
}
}
}
}
}
//If the button and the form both exist
if(attractionLinksButton && travelerForm) {
attractionLinksButton.addEventListener('click', function(event) {
//Check if the traveler form has the --hide class
if(travelerForm.classList.contains('--hide')) {
//Remove the --hide class
travelerForm.classList.remove('--hide');
//Add the --show class
travelerForm.classList.add('--show');
}
});
}
london.js -> Line 134 /* Problem */
If you add "--reveal" to the classList, that would make the class="initial --reveal"; //there is a space between initial and --reveal
Because on that line the css won't trigger
london.css -> line 82
To fix the problem:
//To solve the problem delete the line 134 from london.js and replace with
modal.className += '--reveal';
Based on my previous question on Vue-Bootstrap panel I started using the following code to create a panel:
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
</b-card-header>
<b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
<search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
</b-card-body>
</b-collapse>
</b-card>
As you can see, I a button as a header. But what If I want to do something more complicated?
For example I want to create the following header:
As you can see, this header contains a title and a button. If I do it as I did before, I will have a button and text on a button? Does not feels right. What I currently have:
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<div class="title align-left" height="100px">
<button class="pull-right btn btn-info" #click="goBack()">Go Back</button>
<strong>Data run:</strong>
{{ title() }} <br> {{ subtitle() }}
</div>
</b-card-header>
<!-- BODY -->
</b-card>
How it looks like:
How do I create such panel?
You can achieve this look by using display: flex on your header.
Add the class d-flex to your header and wrapping your button in a div and giving it the class ml-auto, this class applies the style margin-left: auto;
Using margin-left: auto inside display:flex will fill up the empty space with a margin, pushing the content in the opposite direction.
<b-card no-body class="mb-1">
<b-card-header header-tag="header" role="tab" class="d-flex">
<div class="title align-left" height="100px">
<strong>Data run:</strong> Title<br>
Subtitle
</div>
<div class="ml-auto">
<button class="btn btn-info">Go Back</button>
</div>
</b-card-header>
</b-card>
new Vue({
el: "#app"
});
<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap-vue#2.7.0/dist/bootstrap-vue.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.7.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" role="tab" class="d-flex">
<div class="title align-left" height="100px">
<strong>Data run:</strong> Title<br>
Subtitle
</div>
<div class="ml-auto">
<button class="btn btn-info">Go Back</button>
</div>
</b-card-header>
</b-card>
</div>
I have a slider which consists of products.
Right now I'm getting a list of products from the server and populating that slider with the result returned from the server. For this I have the following
<div class="most_buy_slider container special_proposal">
<div v-for="product in mostBoughtProducts">
<div>
<div class="goods_item">
<img :src="product.ProductPreviewImages[0]">
<div class="name">
{{product.Name}}
<span>{{product.Manufacturer}}</span>
</div>
<div class="price">{{product.Price}} грн</div>
<div class="economy">економія складає 57% від роздрібної вартості</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
</div>
</div>
But this result in the following:
however, when I render simple html without v-for it loads correctly.
<div class="most_buy_slider container bigger_width special_proposal">
<div>
<div v-for="index in 10" class="goods_item">
<img src="images/samples/whiskyjackdan.png">
<div class="name">
Вологі серветки Вологі серветки Вологі серветки Вологі серветки
<span>Ruta Selecta Ruta SelectaRuta SelectaRuta Selecta</span>
</div>
<div class="price">
45,55 грн
</div>
<div class="economy">
економія складає 57% від роздрібної вартості
</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
<div>
<div class="goods_item">
<img src="images/samples/ruta1.png">
<div class="name">
Вологі серветки
<span>Ruta Selecta</span>
</div>
<div class="price">
45,55 грн
</div>
<div class="economy">
економія складає 57% від роздрібної вартості
</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
I don't know your CSS, but in first code snippet you included you use additional div for v-for directive, that can break your styles.
Try this code instead:
<div class="most_buy_slider container special_proposal">
<div v-for="product in mostBoughtProducts">
<div class="goods_item">
<img :src="product.ProductPreviewImages[0]" />
<div class="name">
{{ product.Name }}
<span>{{ product.Manufacturer }}</span>
</div>
<div class="price">{{ product.Price }} грн</div>
<div class="economy">економія складає 57% від роздрібної вартості</div>
<div class="to_cart">
<button type="button" class="btn but_blue">в кошик</button>
</div>
</div>
</div>
</div>
I finally solved the problem
I was using Slick slider to display items. While data is being loaded from the server, the slick slider already gets initialized with 0 item in it. And when items has been loaded from the server, vue.js inserts data into the slider, but the slider still assumes that it has 0 item.
So the solution is to reinitialize the slick slider when data loaded from the server.
I called the following after the data load:
reInit() {
$('.most_buy_slider').slick('unslick');
$(".most_buy_slider").slick(this.sliderSettings())
}
sliderSettings() {
return {
infinite: true,
slidesToShow: 4,
slidesToScroll: 1
}
}
Question about simple situation, I want add vue modal component to default Laravel project.
When I registered in this way :
Vue.component('modal', {
template: '#modal-template'
})
new Vue({
el: '#app',
data: {
showModal: false
}
})
And named component like this :
ModalComponent.vue
Browser give me next errors.
All details in the Github repository
By the way, maybe better add modal window from bootstrap with jQuery or it will be messy?
you should have :
Vue.component('modal', require('./components/ModalComponent.vue'));
and inside your ModalComponent.vue file:
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
}
</script>
view.blade.php
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
the usage of a semantic-ui modal window does not work if the root-element is a meteor template:
package: semantic-ui-css
Error reproduction:
hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</body>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And in Javascript (hello.js) code:
if (Meteor.isClient) {
Template.hello.events({
'click .openModal': function (event,template) {
$('#modalView')
.modal({
onDeny : function(){
console.log('canceled');
},
onApprove : function() {
console.log("yeah!");
}
})
.modal('show')
;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Router.route('/', function () {
this.render('hello');
});
The error is:
TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)
Does anyone know how to solve this?
The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to call $dimmer[i].on (where i would be 0 and 1) and it doesn't work that way.
So change hello.html to:
<template name="hello">
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And create a layout (layout.html):
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
</body>
That works.
Of course you could just remove the BODY tag from hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
That works too, but I think the first approach is the clean/Meteor way.