In:
https://codesandbox.io/s/upbeat-hodgkin-qjt61?file=/src/components/EditCategory.vue
the modal is shown as expected upon long click over a category:
but clicking OK does not fire the close event:
<template>
<div>
<p v-longclick="() => longClicked()" #click="longClicked()">
{{ taskItemLocal["name"] }}
</p>
<div v-if="this.showModal" #close="closeModal()">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"> Edit Category </slot>
</div>
<div class="modal-body">
<slot name="name"> Edit Name </slot>
</div>
<div class="modal-body">
<slot name="delete"> Delete Category </slot>
</div>
<div class="modal-footer">
<slot name="footer">
<!-- default footer -->
<!-- EVENT NOT FIRING -->
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</template>
closeModal() is not called; changing showModal "directly" also fails.
You have dispatch event to parent but in parent component you have not done any thing with "close" event. Here, in GenericItem.vue I have made event listener with #close="closeBox($event)" . Here, it will trigger method of closeBox
GenericItem.vue
Changes on Template
<edit-category
v-if="editCategoryStatus"
:taskItem="taskItemLocal"
#close="closeBox($event)"
/>
Add one closeBox method
closeBox() {
this.editCategoryStatus = !this.editCategoryStatus;
},
Add editCategoryStatus on data
data() {
return {
editCategoryStatus: true,
taskItemLocal: {
type: Object,
default: {},
},
};
If you want to listen to an event within the component that emitted that event, you use the instance $on method:
mounted() {
this.$on("close", () => {
this.closeModal();
});
}
The template event handler #close="closeModal()" is used to listen to events from parent. It has no effect within the child component.
The working codesandbox: https://codesandbox.io/s/loving-kirch-vrhwn?file=/src/components/EditCategory.vue .
You could just make your button like this. You made this more complicated than it should be
<button class="modal-default-button" #click="showModal = false">
Also, there is this example from the official docs
here.
Related
I have a component with an input that when clicking opens a modal.
When I use this component, and insert it inside a div with relative position, the modal that opens, it does not display well. I would need the html of the modal to be outside the div position relative.
It is important that my component contains both the input and the modal, since this component itself will be used several times within another component.
<div class="position-relative">
<MyOwnComponet />
</div>
<div class="position-relative">
<MyOwnComponet />
</div>
My component would be something like this, more or less:
<template>
<input #click="showModal = true" />
<div class="modal" v-if="showModal">
...
</div>
</template>
I am not sure what's your point for this kind of requirement but anyway there is a workaround you can do with props.
You can have props in "MyOwnComponet" like this. And use that prop value to render accordingly.
Your main component
<div class="position-relative">
<MyOwnComponet :isInput="true" />
</div>
<div class="position-relative">
<MyOwnComponet :isInput="false" />
</div>
Your (MyOwnComponent)
<template>
<div v-if="isInput">div-1</div>
<div v-else>div-2</div>
</template>
<script>
export default {
props: {
isInput : Boolean,
},
data() {
}
};
</script>
You can replace div-1 with your input and div-2 with modal.
I've wrote simple Modal component with two slots named button and content:
<script>
let opened = false;
function open() {
opened = true;
}
</script>
<slot name="button" opened={opened} open={open}/>
{#if opened}
<slot name="content"/>
{/if}
Also, opened and open-method are passed to parent component via <slot name="button"
In App.svelte:
<script>
import Modal from './Modal.svelte';
</script>
<Modal let:opened let:open>
<button slot="button" on:click={open} class:opened>Open</button>
<div slot="content">Content</div>
</Modal>
So, there are two questions:
1) It looks a little bit weird that props can be passed to parent just through any random slot.
Is it a good practice to do it like this?:
<slot opened={opened} open={open}/>
<slot name="button"/>
{#if opened}
<slot name="content"/>
{/if}
2) <div slot="content">Content</div> passed with its <div>. Could I pass only Content without <div> or can Content be unwrapped somehow?
Thx
1) Yes it's totally fine.
Alternative is to use data-binding or events to send info to a parent.
2) You can have a default slot, and it wouldn't need a wrapping element. Example:
<!-- Modal.svelte -->
<!-- named slot -->
<slot name="button"/>
<!-- unnamed/default slot -->
<slot/>
<!-- usage -->
<Modal>
<button slot="button"/>
I'm unwrapped in the default slot!
<slot/>
I am following a tutorial and they doing a project. everything is perfect and i was doing well. but i face an error. i have a component (Home.vue) and inside component there have a button. if user click the button then a modal will open (using BULMA scss framework and there is no js). when button is clicked then another component (Add.vue) will appear where actual modal code is writed. i pass a property Home.vue to Add.vue via <Add></Add> Component. this property value is tell modal will active or not.
here is home.vue
<template>
<div>
<nav class="panel column is-offset-2 is-8">
<p class="panel-heading">
VueJs Phonebook
<button class="button is-link is-outlined" #click="openAdd">
Add New
</button>
</p>
</nav>
<Add :openmodal='addActive'></Add>
</div>
</template>
<script>
let Add = require('./Add.vue')
export default {
components:{Add},
data(){
return{
addActive:''
}
},
methods:{
openAdd(){
this.addActive = 'is-active';
}
}
}
</script>
i am successfully get the property in Add.vue but modal has cancle and close button. i use to write a method called close. if button is clicked the this.$emit('closeRequest'); should make a event in vue dev tool. but it do not create any event if cancle or close button was clicked.
here is Add.vue file
<template>
<div class="modal" :class="openmodal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close" #click='close'>
</button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button" #click='close'>Cancel</button>
</footer>
</div>
</div>
</template>
<script>
export default{
props:['openmodal'],
methods:{
close(){
this.$emit('closeRequest');
},
}
}
</script>
<template>
<div>
<nav class="panel column is-offset-2 is-8">
<p class="panel-heading">
VueJs Phonebook
<button class="button is-link is-outlined" #click="openAdd">
Add New
</button>
</p>
</nav>
<Add :openmodal='addActive' #closeRequest='closeAdd'></Add>
</div>
</template>
<script>
let Add = require('./Add.vue')
export default {
components:{Add},
data(){
return{
addActive:''
}
},
methods:{
openAdd(){
this.addActive = 'is-active';
},
closeAdd(){
this.addActive = '';
}
}
}
</script>
I have a <router-link to = "/ endreco / test">, but I need to perform the same behavior on a vue-material tab, something like this: <md-tab md- icon = "books"> .. to change my route, same as the href = ""
What should I do?
I'm using vue.js, the vue-router to control routes and style with vue-material
You can add a #click.native handler to push to a route manually (the .native modifier is needed since the md-tab component does not have a click event):
<md-tab #click.native="$router.push('/endreco/test')">
Here's the documentation on Programmatic Navigation with Vue Router.
See my code I have implemented a method which traverses to router to see routes of mentioned name of component, you can easily get idea!
<template>
<div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
<div class="image-card" v-for="picture in this.pictures" #click="displaydetails(picture.id) ">
<div class="image-card__picture">
<img :src="picture.url" />
</div>
<div class="image-card__comment mdl-card__actions">
<span>{{ picture.comment }}</span>
</div>
</div>
</div>
</div>
<router-link class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" to="/postview">
<i class="material-icons">add</i>
</router-link>
</div>
</template>
<script>
import data from '../data'
export default {
data() {
return{
'pictures' : data.pictures
}
},
methods :{
displaydetails (id){
this.$router.push({name:'detailview', params:{id:id}});
console.log("helo");
}
}
}
</script>
Hope get something resourceful out of it!
so I am new to vue, but getting up to speed. However, I cannot make the props thing to work - it always remains undefined in my child component.
The idea of the below is to create a app-wide notification modal window to display notifications.
This is my app.js
require('./bootstrap');
import ModalNotification from './components/Modal-Notification.vue';
const app = new Vue({
el: '#app',
data : {
formInputs: {},
formErrors: {},
showModal: false
},
components: {ModalNotification}
});
This is my Modal-Notification.vue
<template>
<transition name="modal">
<div class="modal-mask" #click="$emit('close')">
<div class="modal-wrapper">
<div class="modal-container" #click.stop>
<!-- <div class="modal-header">
<slot name="header">
NOTIFICATION
</slot>
</div> -->
<div class="modal-body">
<slot name="body">
Bla bla
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-success" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'ModalNotification',
data: function() {
return {
};
},
props: ['showModal'],
mounted: function() {
console.log(this);
document.addEventListener("keydown", (e) => {
console.log(this.showModal);
if (this.showModal && e.keyCode == 27) {
this.$emit('close');
}
});
},
methods: {
}
}
</script>
And the relevant part of app.blade.php
<div class="container-fluid" id="app">
<button #click="showModal = true" class="btn btn-default">MODAL</button>
<modal-notification v-if="showModal" #close="showModal = false" :showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
<div id="wrapper">
#yield('sidebar')
#yield('content')
</div>
</div>
I've tried everything out there, except switching to Browserify, babel and such stuff, but I don't think it should be needed - webpack should work just fine.
Please help, if you can.
You have mistake in the following snippet of code:
<modal-notification v-if="showModal" #close="showModal = false" :showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
:showModal="false" is basically shortcut of v-bind:showModal="false", which tries to search vue instance variable in the value of attached HTML property(documentation). as you are passing false which is not a vue data variable, it is just passing null in showModal props.
If you want to pass only false, change the code to following:
<modal-notification v-if="showModal" #close="showModal = false" showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
Edited
I think it is magic of camelCase-vs-kebab-case:
HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:
You need to pass : show-modal="false"
<modal-notification v-if="showModal" #close="showModal = false" show-modal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>