vue3 router transition warnings modal - vue-router

here's what I did, I added a transition to the router link. and everything works as it is, but when I enter contact, the modal works because it is modal, but when I switch to other pages again, it does not switch.
App.vue
<template>
<header class="bg-white dark:bg-black">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</header>
<div class="flex flex-row justify-center items-center mx-auto w-full">
<router-view v-slot="{ Component, route }">
<transition name="route" mode="out-in">
<component :is="Component" :key="route.path"/>
</transition>
</router-view>
</div>
</template>
<style>
.route-enter-from,
.route-leave-to {
opacity: 0;
transform: translateY(-30px);
}
.route-enter-active,
.route-leave-active {
transition: all 0.3s ease;
}
.route-enter-to,
.route-leave-from {
transform: translateY(0);
}
</style>
contact.vue
<template>
<button id="show-modal" #click="showModal = true">Show Modal</button>
<Teleport to="body">
<modal :show="showModal" #close="showModal = false">
<template #header>
<h3>custom header</h3>
</template>
</modal>
</Teleport>
</template>
<script>
import Modal from './Modal.vue'
export default {
components: {
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
modal.vue
<script>
export default {
props: {
show: Boolean
}
}
</script>
<template>
<Transition name="modal">
<div v-if="show" 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>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>

Related

Styling selected value in Vue Select

I'm using vue select. In the dropdown, there are the labels (not only text). Is it possible to have also the label for the selected value?
<div class="form-group row">
<label for="project_status_id" class="col-sm-3 col-form-label">Projekt Status</label>
<div class="col-sm-9">
<v-select :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id" v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
<template v-slot:option="option" >
<div v-html="option.status_label" class="mb-1">
</div>
</template>
</v-select>
<template v-if="$v.form.project_status_id.$error">
<p class="text-danger" v-if="!$v.form.project_status_id.required">
Projekt - Status ist erforderlich!
</p>
</template>
</div>
</div>
Assuming you want the HTML of the status_label, also assuming that status_label is a template string or similar, then use the selected-option slot with the slot's content being the same as your option slot without the class attached.
The key part in the example below is, as mentioned, the selected-option slot:
<!-- Using OP's `option` key -->
<template v-slot:selected-option="option">
<div v-html="option.status_label"></div>
</template>
The example below is a fork of Vue-Select's Codepen example with modifications for the answer.
Vue.config.productionTip = false;
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: {
options: [
{
name: `<span style="padding: 4px; background: green; border-radius: 0.25rem; color: white;">Foo</span>`
},
{
name: `<span style="padding: 4px; background: orange; border-radius: 0.25rem; color: white;">Bar</span>`
},
{
name: `<span style="padding: 4px; background: red; border-radius: 0.25rem; color: white;">Baz</span>`
}
]
}
});
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}
h1 {
font-size: 26px;
font-weight: 600;
color: #2c3e5099;
text-rendering: optimizelegibility;
-moz-osx-font-smoothing: grayscale;
-moz-text-size-adjust: none;
}
#app {
max-width: 30em;
margin: 1em auto;
}
<script src="https://unpkg.com/vue#latest"></script>
<script src="https://unpkg.com/vue-select#latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select#latest/dist/vue-select.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600">
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options" label="label">
<template v-slot:option="option" >
<div v-html="option.name" style="padding: 2px 0;"></div>
</template>
<template v-slot:selected-option="option">
<div v-html="option.name"></div>
</template>
</v-select>
</div>

VueJS: How to add a boolean prop to existing template

I am looking to extend a vue-toggle component I found to add a boolean value. I am trying to add ability to hide/show an element based on the boolean prop.
Here is my html code:
<div class="container" id="app">
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">
<img src="https://images-na.ssl-images-amazon.com/images/I/81UxhkSlBjL._UX466_.jpg" alt="" class="img-responsive" />
</div>
<div class="col-xs-9 col-sm-8 col-md-7 col-lg-6 options">
<fieldset class="form-group">
<legend class="sr-only">Style</legend>
<div class="form-group">
<vue-toggle :values="styles" :boolean="showVNeck" :selected.sync="style" default="crew"></vue-toggle>
</div>
</fieldset>
<div><span v-if="showVNeck">V Neck</span><span v-else>Crew Neck</span> Selected</div>
</div>
</div>
</div>
<template id="vue-toggle">
<div class="btn-group">
<button type="button"
v-for="(val, key) in values"
#click="changeSelectVal(key, boolean)"
:class="['btn', { 'btn-primary': selected === key, 'btn-default': selected !== key }]"
>{{ val }}</button>
</div>
</template>
Here is my javascript:
var Toggle = Vue.extend({
template: '#vue-toggle',
props: ['values','selected','boolean','default'],
mounted: function () {
this.selected = this.default;
},
methods: {
changeSelectVal: function(val, boolean) {
this.selected = val;
this.boolean = !this.boolean;
}
}
});
Vue.component('vue-toggle', Toggle);
new Vue({
el: '#app',
data: {
style: '',
showVNeck: false,
styles: {
'crew': 'Crew Neck',
'vneck': 'V-Neck',
}
}
});
Here is a codepen to share:
https://codepen.io/mujaji/pen/YzXVqaL
I think I am just overlooking something and looking for assistance.
Cheers!
The .sync modifier requires that your child emits events of the type update:myPropName instead of directly mutating the prop - look at the documentation:
var Toggle = Vue.extend({
template: '#vue-toggle',
props: ['values','selected','boolean','default'],
mounted: function () {
this.$emit('update:selected',this.default);
},
methods: {
changeSelectVal: function(val, boolean) {
this.$emit('update:selected',val);
this.$emit('update:boolean',!this.boolean);
}
}
});
Vue.component('vue-toggle', Toggle);
new Vue({
el: '#app',
data: {
style: '',
showVNeck: false,
styles: {
'crew': 'Crew Neck',
'vneck': 'V-Neck',
},
},
methods:
{
updateVNeck(newValue)
{
this.showVNeck = newValue;
}
}
});
body {
background-color: #5c4084;
padding: 50px;
}
.container {
background-color: #fff;
padding-top: 40px;
padding-bottom: 80px;
border-radius: 8px;
}
.heading
h1 {
color: #fff;
font-size: 4rem;
font-weight: 900;
margin: 0 0 5px 0;
background: -webkit-linear-gradient(#fff, #999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.heading h4 {
color: #5c3d86;
font-size: 24px;
font-weight: 400;
text-align: center;
margin: 0 0 35px 0;
}
.options {
padding-top: 80px;
}
.btn{
outline: none !important;
}
.btn.btn-primary {
background-color: #5c4084;
border-color: #5c4084;
outline: none;
}
.btn.btn-primary:hover {
background-color: #5c4084;
border-color: #5c4084;
}
.btn.btn-primary:active, .btn.btn-primary:focus {
background-color: #5c4084;
border-color: #5c4084;
}
.btn.btn-default:hover {
background-color: #5c4084;
border-color: #5c4084;
color: #fff;
}
.btn.btn-default:active, .btn.btn-default:focus {
background-color: #5c4084;
border-color: #5c4084;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container" id="app">
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">
<img src="https://images-na.ssl-images-amazon.com/images/I/81UxhkSlBjL._UX466_.jpg" alt="" class="img-responsive" />
</div>
<div class="col-xs-9 col-sm-8 col-md-7 col-lg-6 options">
<fieldset class="form-group">
<legend class="sr-only">Style</legend>
<div class="form-group">
<vue-toggle :values="styles" :boolean.sync="showVNeck" :selected.sync="style" default="crew"></vue-toggle>
</div>
</fieldset>
<div><span v-if="showVNeck">V Neck</span><span v-else>Crew Neck</span> Selected</div>
</div>
</div>
</div>
<template id="vue-toggle">
<div class="btn-group">
<button type="button"
v-for="(val, key) in values"
#click="changeSelectVal(key, boolean)"
:class="['btn', { 'btn-primary': selected === key, 'btn-default': selected !== key }]"
>{{ val }}</button>
</div>
</template>

After installing bootstrap, modal is a black screen

Im getting used to Vue, but before I installed Bootstrap, my modal worked completely fine. Now it is a black screen. Also when I have my button inside of a div, the button does not render. When I take the button outside of it's div, the modal does not even toggle.
here is the products component i'm importing my modal into:
<template>
<div class="products">
<h1>All Products</h1>
<div v-for="product in products" class="single-product">
<h2 class="title">{{product.title}} - ${{product.price}}</h2>
<img class="images" :src="product.photo_url"></img>
<div class="modal">
<button
type="button"
class="btn btn-primary"
#click="showModal"
>
Show Product Info
</button>
<modal
v-show="isModalVisible"
#close="closeModal"
/>
</div>
</div>
</div>
</template>
<script>
//imports
import Vue from 'vue'
import Modal from './Modal.vue'
//import so I can use vue resource for an http request
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
components: {
'modal': Modal
},
data() {
return {
//empty products array to be filled after get request
products: [],
//set modal visibility to false by default
isModalVisible: false,
}
},
methods: {
//show modal when user clicks view product info
showModal() {
this.isModalVisible = true;
},
closeModal() {
//close modal when user clicks the close button inside the modal
this.isModalVisible = false;
}
},
//request to retrieve all products from API using Created
created() {
//http request using vue resource from dependencies
this.$http.get('https://tap-on-it-exercise-backend.herokuapp.com/products').then(function(data) {
//fill products array by grabbing the data, slicing ot, then setting it to products array
this.products = data.body.slice(0, data.body.length)
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.images {
width: 100px;
height: 100px;
}
</style>
Here is my modal component that is exported and then imported into products component:
<script>
export default {
name: 'Modal',
methods: {
close() {
this.$emit('close');
},
},
};
</script>
<template>
<transition name="modal-fade">
<div class="modal-backdrop">
<div class="modal" role="dialog" aria-labelledby="productTitle" aria-describedby="productDescription">
<header class="modal-header" id="productTitle">
<slot name="header">
Product Title
</slot>
</header>
<section class="product-photo" id="productPhoto">
<slot name="photo">
Product Photo
</slot>
</section>
<section class="product-description" id="productDescription">
<slot name="body">
Product Description
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button type="button" class="btn-green" aria-label="Close modal">
Like
</button>
<button type="button" class="btn-green" #click="close" aria-label="Close modal">
Close
</button>
</slot>
</footer>
</div>
</div>
</transition>
</template>
<style>
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background: #FFFFFF;
box-shadow: 2px 2px 20px 1px;
overflow-x: auto;
display: flex;
flex-direction: column;
}
.modal-header,
.modal-footer {
padding: 15px;
display: flex;
}
.modal-header {
border-bottom: 1px solid #eeeeee;
color: #4AAE9B;
justify-content: space-between;
}
.modal-footer {
border-top: 1px solid #eeeeee;
justify-content: flex-end;
}
.product-description {
position: relative;
padding: 20px 10px;
}
.btn-close {
border: none;
font-size: 20px;
padding: 20px;
cursor: pointer;
font-weight: bold;
color: #4AAE9B;
background: transparent;
}
.btn-green {
color: white;
background: #4AAE9B;
border: 1px solid #4AAE9B;
border-radius: 2px;
}
</style>

Trying to run Modal component VueJS in existing project

I made a separate .vue file, where I have put the "template" of the Modal Box and the required CSS(later I will move it to the main.css). The functionality which I need is - being on the main page Data.vue, the client clicks on the button and opens up a Modal Box, where he/she can write a message and send it to us.
modalTest.vue
<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>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
I added the button which I need to click in order to popup the Modal Box in one of the pages of the project.
Data.vue
<template>
...
a lot of divs
...
<button id="show-modal" #click="showModal = true">Show Modal</button>
...
</template>
<script>
export default {
}
</script>
And last but not least the
main.js
import modalTest from './components/modalTest'
Vue.component('modal', modalTest);
const app = new Vue({
el: '#app',
render: h => h(App),
router,
data: {
showModal: false
}
});
That's what I managed to do until now. However, when I click on the button, which is in the page Data.vue, nothing happens. Looking at the console there is no information regarding the problem. Maybe I am mistaken something very stupid, but I can't find anything wrong for now.
Putting the showModal: false in the return of data of the childs page fixed the problem :) Thanks to #Vamsi Krishna

Vuejs modal component passing data

I am stuck making a modal component for my app in VueJS. I want to be able to put it in its own component for reusability, be able to pass custom content and have multiple modals.
I made the component and it looks like this from the VueJS docs:
Modal.vue
<template>
<div ref="modal">
<script type="text/x-template" id="modal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Header
</slot>
</div>
<div class="modal-body">
<slot name="body">
Body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
Footer
</slot>
<button class="btn btn-primary" #click="$emit('close')">
Button
</button>
</div>
</div>
</div>
</div>
</transition>
</script>
</div>
</template>
<script>
export default {
components: { },
props: ['header', 'footer', 'body', 'button'],
data: () => ({
showModal: false
}),
methods: {
open () {
console.log('Opening modal')
this.showModal = true
}
}
}
</script>
<style>
#modal {
/*color: #000;*/
}
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
/*padding: 20px 30px;*/
background-color: #25262D;
color: #FEFEFE;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-size: 1.2em;
}
.modal-header {
border-radius: 3px;
background-color: #202128;
border: none;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
/*background-color: #202128;*/
border: none;
}
.modal-footer {
text-align: center;
border: none;
}
.modal-footer .btn {
font-size: 1.0em;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
I add a modal in my App.vue:
<button #click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal">
Launch Updated Modal
</button>
<modal ref="updatedModal" v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<div slot="header">custom header</div>
</modal>
<script>
import Modal from './components/Modal'
export default {
components: { Modal },
data: () => ({
showModal: false
}),
methods: {
openUpdatedModal () {
this.$refs.updatedModal.open()
}
}
}
</script>
When I click the button I get the text in console "Opening modal" but nothing happens.
I can summon it and it works if I have ALL the code in App.vue
What am I missing?
I made it work by creating a ModalComponent.vue and removing the script tag as Phil suggested in the comments. Here's the code.
ModalComponent.vue:
<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>
Here's how I defined my component:
Vue.component('modal', ModalComponent);
Modal button in markup:
<button id="show-modal" #click="showModal = true">Show Modal</button>
And the modal component being called on the page:
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
It's worth noting that I had to declare the showModal property wherever I use my modal.