I'm new to VueJS.
I had written an alert box using jquery. Now I'm trying to provide that in VueJS.
Here is what I have done:
1- Created a component named NovinAlert.vue including:
<template>
<div id="novin-alert-container">
<div v-for="message in messages" class="alert novin-alert" :class="message.class">
×
{{ message.body }}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
messages: [],
}
},
methods: {
novinAlert: function (message) {
let app = this;
message.type = typeof message.type !== 'undefined' ? message.type : 'info';
message.class = 'alert' + message.type;
let index = app.messages.push(message) - 1;
if (typeof message.duration !== 'undefined') {
window.setTimeout(function () {
app.messages.splice(index, 1);
}, message.duration * 1000);
}
}
}
}
</script>
2- My example component is Dashboard.vue
<template>
...
</template>
<script>
export default {
mounted() {
novinAlert('test');
}
}
</script>
3- My main layout is:
<body>
<div id="app">
<novin-alert></novin-alert>
<router-view></router-view>
</div>
</body>
4- And this is my app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
import Dashboard from './components/Dashboard.vue';
const routes = [
{path: '/', component: Dashboard, name: 'dashboard'},
];
import NovinAlert from './components/utils/NovinAlert.vue';
Vue.component('novin-alert', NovinAlert);
const router = new VueRouter({ routes: routes });
const app = new Vue({
router,
el: '#app'
});
When I run dashboard page, it doesn't know novinAlert function.
What I have done wrong? And what is best practice for what I'm trying to do?
Any help is appreciated.
i've designed a SIMPLE popup right now with Vuejs 2.* and it works well. In this example, popup is included as a Local component. This would be one of the best practices to follow. Let me know if this helps.
App.vue
<template>
<div>
<div>Main page</div>
<button #click="openpopup">Open popup</button>
<popup :popupData="popupData" ></popup>
</div>
</template>
<script>
import Popup from'./Popup.vue';
export default {
components:{
"popup" : Popup
},
data() {
return {
popupData : {
"header" : "My popup",
"body" : "hello world",
"footer" : "divine inc.",
"display" : "none"
}
}
},
methods : {
openpopup(){
this.popupData.display = "block";
}
},
mounted(){
this.popupData.display = "block";
}
}
</script>
Popup.vue
<template>
<div id="popup" :style="{display : popupData.display}">
<div class="inner">
<div class="header">
<div>{{popupData.header}}</div>
<div #click="closeFunction">Close</div>
</div>
<div class="body">{{popupData.body}}</div>
<div class="footer">{{popupData.footer}}</div>
</div>
</div>
</template>
<script>
export default {
props : ["popupData"],
methods : {
closeFunction(){
this.popupData.display = "none";
}
}
}
</script>
<style>
html,body{
padding: 0;
margin:0;
}
#popup{
position: absolute;
width: 100%;
height :100%;
top: 0;
}
#popup .inner{
background-color: green;
position: inherit;
top: 10%;
left: 39%;
width: 300px;
}
#popup .inner div{
text-align: left;
}
#popup .inner .header{
display: flex;
justify-content: space-between;
}
</style>
You can't access one component's method from another. you need to move the novinAlert function to the Dashboard component and pass messages as a property to NovinAlert component:
NovinAlert.vue
<template>
<div id="novin-alert-container">
<div v-for="message in messages" class="alert novin-alert" :class="message.class">
×
{{ message.body }}
</div>
</div>
</template>
<script>
export default {
props: ['messages']
}
</script>
Dashboard.vue
<template>
<!-- pass the messages prop to the component -->
<novin-alert :messages="messages"></novin-alert>
</template>
<script>
export default {
mounted() {
this.novinAlert('test');
},
data() {
return {
messages: []
}
},
methods: {
novinAlert: function (message) {
let app = this;
message.type = typeof message.type !== 'undefined' ? message.type : 'info';
message.class = 'alert' + message.type;
let index = app.messages.push(message) - 1;
if (typeof message.duration !== 'undefined') {
window.setTimeout(function () {
app.messages.splice(index, 1);
}, message.duration * 1000);
}
}
}
}
</script>
if you want the novin alert in the app level, you'll need to pass the function to the app component
This is what I finally did:
I created an instance of Vue in my app.js:
window.eventBus = new Vue();
I use this event but for multiple purposes. Whenever I need I trigger(emit) an event and the listener does required action.
For alert box, I emit the event like this:
window.eventBus.$emit('alert', {
text: app.trans('general.error_in_reading_data'),
type: 'danger',
duration: 5,
});
Then my alert component reacts like this:
mounted() {
window.eventBus.$on('alert', (message) => {
this.novinAlert(message);
});
},
Related
I am attempting to emit a value with an event in a child component that gets used in the parent as per the vue docs, but the value (selectedItem) returns 'undefined' in the parent when I try console logging it from the function.
How can I properly send over the selectedItem value from the child component to get used in the parent?
Relevant code below.
Child Component:
import { ref } from 'vue'
export default {
props: {
inventory: Object
},
setup(props) {
const selectedItem = ref("");
function showInventoryItem(item) {
for (let i = 0; i < props.inventory.length; i++) {
if (props.inventory[i].id == item.id){
this.selectedItem = item.id;
}
}
}
return {
selectedItem,
}
},
template: `
<div id="inventory-bar">
<h3>Inventory</h3>
<div id="inventory-grid">
<button v-for="item in inventory" class="grid-item" #click="showInventoryItem(item)">
{{item.label}}
</button>
</div>
<div id="item-info" v-show="selectedItem">
<button #click="$emit('useItem', selectedItem)">Use item</button>
</div>
</div>
`
}
Parent:
<script type="module">
import { createApp } from 'vue'
createApp({
components: {
},
setup() {
function useItem(selectedItem) {
console.log("selectedItem:" + selectedItem);
}
return {
useItem
}
}
}).mount('#app')
</script>
<div id="app">
<inventory-bar :inventory="inventory" #use-item="useItem(selectedItem)"></inventory-bar>
</div>
I'm trying to create a BaseOverlay component that basically teleports its content to a certain area of my application. It works just fine except there's an issue when using it with v-show... I think because my component's root is a Teleport that v-show won't work because Teleport is a template.
I figured I could then use inheritAttrs: false and v-bind="$attrs" on the inner content... this throws a warning from Vue saying Runtime directive used on component with non-element root node. The directives will not function as intended. It results in v-show not working on MyComponent, but v-if does work.
Any clues as to what I'm doing wrong?
Example
App.vue
<script setup>
import MyComponent from "./MyComponent.vue";
import {ref} from "vue";
const showOverlay = ref(false);
function onClickButton() {
showOverlay.value = !showOverlay.value;
}
</script>
<template>
<button #click="onClickButton">
Toggle Showing
</button>
<div id="overlays" />
<div>
Hello World
</div>
<MyComponent v-show="showOverlay" text="Doesn't work" />
<MyComponent v-if="showOverlay" text="Works" />
</template>
BaseOverlay.vue
<template>
<Teleport to="#overlays">
<div
class="overlay-container"
v-bind="$attrs"
>
<slot />
</div>
</Teleport>
</template>
<script>
export default {
name: "BaseOverlay",
inheritAttrs: false,
};
</script>
MyComponent.vue
<template>
<BaseOverlay>
{{text}}
</BaseOverlay>
</template>
<script>
import BaseOverlay from "./BaseOverlay.vue";
export default {
name: "MyComponent",
components: {
BaseOverlay
},
props: {
text: {
type: String,
default: ""
}
}
}
</script>
I would consider moving the modal/overlay dependency out of the component and into the app composition to make it more reusable.
Note the isMounted check check - this is to add a delay if the outlet containers have not yet been defined. You may need to add additional handling if your outlets are not pressent on mount e.g. <div id="outlet" v-if="false">
const {
createApp,
defineComponent,
ref,
onMounted
} = Vue
//
// Modal
//
const MyModal = defineComponent({
name: 'MyModal',
props: {
to: {
type: String,
required: true
},
show: Boolean
},
setup(){
const isMounted = ref(false);
onMounted(()=> isMounted.value = true )
return { isMounted }
},
template: `
<teleport :to="to" v-if="isMounted">
<div class="overlay-container" v-show="show">
<slot />
</div>
</teleport>
`
})
//
// Component
//
const MyComp = defineComponent({
name: 'MyComp',
template: `<div>Component</div>`
})
//
// App
//
const MyApp = defineComponent({
name: 'MyApp',
components: {
MyModal,
MyComp
},
setup() {
const modalShow = ref(false);
const modalOutlet = ref('#outletOne');
const toggleModalShow = () => {
modalShow.value = !modalShow.value
}
const toggleModalOutlet = () => {
modalOutlet.value = modalOutlet.value == '#outletOne'
? '#outletTwo'
: '#outletOne'
}
return {
toggleModalShow,
modalShow,
toggleModalOutlet,
modalOutlet,
}
},
template: `
<div>
<button #click="toggleModalShow">{{ modalShow ? 'Hide' : 'Show' }} Modal</button>
<button #click="toggleModalOutlet">Toggle Modal Outlet {{ modalOutlet }} </button>
</div>
<MyModal :to="modalOutlet" :show="modalShow">
<MyComp />
</MyModal>
<div id="outletOne">
<h2>Outlet One</h2>
<!-- outlet one -->
</div>
<div id="outletTwo">
<h2>Outlet Two</h2>
<!-- outlet two -->
</div>
`
})
//
// Assemble
//
const app = createApp(MyApp)
app.mount('body')
/* just some styling */
#outletOne { color: tomato; }
#outletTwo { color: olive; }
h2 { margin: 0; }
[id*=outlet]{ display: inline-flex; flex-direction: column; padding: 1rem; }
button { margin: 1rem; }
<script src="https://unpkg.com/vue#3.1.4/dist/vue.global.js"></script>
Wanted to follow-up on this. I started running into a lot of other issues with Teleport, like the inability to use it as a root element in a component (like a Dialog component because I want to teleport all dialogs to a certain area of the application), and some other strange issues with KeepAlive.
I ended up rolling my own WebComponent and using that instead. I have an OverlayManager WebComponent that is used within the BaseOverlay component, and every time a BaseOverlay is mounted, it adds itself to the OverlayManager.
Example
OverlayManager.js
export class OverlayManager extends HTMLElement {
constructor() {
super();
this.classList.add("absolute", "top-100", "left-0")
document.body.appendChild(this);
}
add(element) {
this.appendChild(element);
}
remove(element) {
this.removeChild(element);
}
}
customElements.define("overlay-manager", OverlayManager);
BaseOverlay.vue
<template>
<div class="overlay-container" ref="rootEl">
<slot />
</div>
</template>
<script>
import {ref, onMounted, onBeforeUnmount, inject} from "vue";
export default {
name: "BaseOverlay",
setup() {
const rootEl = ref(null);
const OverlayManager = inject("OverlayManager");
onMounted(() => {
OverlayManager.add(rootEl.value);
});
onBeforeUnmount(() => {
OverlayManager.remove(rootEl.value);
});
return {
rootEl
}
}
};
</script>
App.vue
<script setup>
import {OverlayManager} from "./OverlayManager.js";
import MyComponent from "./MyComponent.vue";
import {ref, provide} from "vue";
const manager = new OverlayManager();
provide("OverlayManager", manager);
const showOverlay = ref(false);
function onClickButton() {
showOverlay.value = !showOverlay.value;
}
</script>
<template>
<button #click="onClickButton">
Toggle Showing
</button>
<div>
Hello World
</div>
<MyComponent v-show="showOverlay" text="Now Works" />
<MyComponent v-if="showOverlay" text="Works" />
</template>
<style>
.absolute {
position: absolute;
}
.top-100 {
top: 100px;
}
.left-0 {
left: 0;
}
</style>
This behaves exactly how I need it, and I don't have to deal with the quirks that Teleport introduces, and it allows me to have a singleton that is in charge of all of my overlays. The other benefit is that I have access to the parent of where BaseOverlay is initially added in the HTML (not where it's moved). Honestly not sure if this is a good practice, but I'm chuffed at how cute this is and how well Vue integrates with it.
I have a simple Event bus that changes styles on a page and it works. The event bus is called with the name of the event bus and $emit and $on:
EventBus.$on
and
EventBus.$emit('call-modal', { type: 'success' });
How can I make so that instead of calling it with $on and $emit I can call it with this.$root.$emit so that I can use it in every other component? I tried but currently it doesn't work, why?
Here is my App.vue:
<template >
<div id="app">
<bankAccount>
</bankAccount>
<div :class="['modal', `modal--type--${modalType}`]" v-show="showModal">
<slot name="title">e</slot>
<slot name="description"></slot>
</div>
</div>
</template>
<script>
import bankAccount from './components/bankAccount.vue'
import Vue from 'vue'
export const EventBus = new Vue()
export default {
name: 'app',
components: {
bankAccount,
},
data() {
return {
showModal: false,
modalType: 'default',
}
},
created() {
EventBus.$on('call-modal', obj => {
this.showModal = true
this.modalType = obj.type
})
},
}
</script>
<style>
.modal {
height: 100px;
width: 300px;
border: solid gray 2px;
}
.modal--type--success {
border-color: green;
}
.modal--type--danger {
border-color: red;
width: 100%;
}
.modal--type--warning {
border-color: yellow;
width: 100%;
}
</style>
And my component:
<template>
<div>
<button class="pleeease-click-me" #click="callModal()">Click me</button>
</div>
</template>
<script>
import { EventBus } from '../App.vue';
export default {
name: 'bankAccount',
data() {
return {
showModal: false
}
},
methods: {
callModal() {
this.showModal = !this.showModal
EventBus.$emit('call-modal', { type: 'success' });
}
}
}
</script>
<style scoped>
.modal {
height: 100px;
width: 300px;
}
</style>
You can create a separate eventbus.js file and include it to all of your components. This way, they'll be using the same eventbus instance. TL;DR: it's been explained here:
https://alligator.io/vuejs/global-event-bus/
Long one:
Create an eventbus.js file with this content:
import Vue from 'vue';
export const EventBus = new Vue();
Then include it:
import { EventBus } from './event-bus.js';
Then use it:
EventBus.$on("event", function(data){
// do stuff with data
});
with
EventBus.$emit("event", data);
and don't forget to remove the event on destruction:
beforeDestroy {
EventBus.$off("event");
}
Simply add that to the instance prototype :
// main.js
//import vue from 'vue'
Vue.prototype.$eventHub = new Vue();
// new Vue({
// ...
// })
now you can use it on any component with :
this.$eventHub.$emit('call-modal');
To achieve desired result you have to slightly change your code.
In your App.vue change these lines of code:
created() {
this.$root.$on('call-modal', obj => {
this.showModal = true
this.modalType = obj.type
})
},
And then in your component:
callModal() {
this.showModal = !this.showModal
this.$root.$emit('call-modal', { type: 'success' })
}
Notice that approach suggested by #Dadboz, is preferable, than you desirable.
I tried to make communicate to components with vuejs and vuex :
First component is a menu
Second component, inside the first, is an hamburgerButton.
In this very current case, when I click the hamburgerButton, this one is animated and the menu too. With this code, after the button click, the menu is animated with vueTransition and the hamburgerButton too. Note that i use vuex to manage a menuIsOpen state.
My problem is when i click an item of the menu, I would like fired the hamburgerButton animation.
hamburgerButtonanimation method, call animButtonHandler(), is encapsulated in a #click event. Actually i understand why it doesn't work right know, but I don't perceive how to handle this method to the click of a Parent element (item of the menu). So my question is, how can I access a method to a child component from a parent component ? Or is there an another workaround methodology to achieve this ?
parent component - menu.vue :
<template>
<div class="menu">
<!-- import hamburgerButton component -->
<hamburger-button></hamburger-button>
<transition v-on:enter="enterMenuHandler" v-on:leave="leaveMenuHandler">
<div class="menu_wrapper" v-if="this.$store.state.menuIsOpen">
<ul class="menu_items">
<li class="menu_item" #click="$store.commit('toggleMenu')">
<router-link class="menu_link" to="/">home</router-link>
<router-link class="menu_link" to="/contact">contact</router-link>
</li>
</ul>
</div>
</transition>
</div>
</template>
<script>
import hamburgerButton from "hamburgerButton.vue";
export default {
components: {
'hamburger-button': hamburgerButton,
},
methods: {
enterMenuHandler(el, done){
TweenLite.fromTo(el, 0.5, {
opacity: '0',
},{
opacity: '1',
onComplete: done
});
},
leaveMenuHandler(el, done){
TweenLite.to(el, 0.5, {
opacity: '0',
onComplete: done
});
},
}
}
</script>
child component : hamburgerButton.vue :
<template>
<div class="hamburgerButton" #click="animButtonHandler()">
<div class="hamburgerButton_inner" ref="hamburgerButtonInner">
<i class="hamburgerButton_icon></i>
</div>
</div>
</template>
<script>
export default {
methods: {
animButtonHandler (){
// toggle the state of menu if button clicked
this.$store.commit('toggleMenu');
const isOpen = this.$store.state.menuIsOpen === true;
// anim the button
TweenLite.to(this.$refs.hamburgerButtonInner, 0.5, {
rotation: isOpen ? "43deg" : '0',
});
},
}
}
</script>
store.js (imported in the main.js) :
let store = new Vuex.Store({
state : {
menuIsOpen : false,
},
mutations: {
toggleMenu(state) {
state.menuIsOpen = !state.menuIsOpen
}
}
});
I have added basic Example of event bus. you can now compare it with and do changes like wise.
if find any difficulties please comment.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h2>event bus</h2>
<button #click="callChildAnimateMethod"> Button On Parent Call Child </button>
<childcmp><childcmp />
</div>
<script>
var EventBus = new Vue();
Vue.component('childcmp', {
template: `<div>child demo - {{ message }}</div>`,
data: function() {
return {
message: 'hello'
}
},
mounted: function() {
// listen for event
EventBus.$on('animate', this.animButtonHandler);
},
destroyed: function(){
// remove listener
EventBus.$off('animate', this.animButtonHandler);
},
methods: {
animButtonHandler: function() {
console.log('this is child method');
this.message = 'I am changed.'
}
}
});
new Vue({
el: '#app',
data: function() {
return {
}
},
methods: {
callChildAnimateMethod: function() {
EventBus.$emit('animate');
}
}
});
</script>
</body>
</html>
Update
you need to define EventBus
eventbus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
parent component - menu.vue
import EventBus from './eventbus.js'
... your code
child component : hamburgerButton.vue :
import EventBus from './eventbus.js'
... your code
now EventBus will be available to your code.
Since you wanted to know how to imtegrate event bus with your code, here it is:
Create an event bus which is just an empty vue instance
Add it in you main.js file or outsource it in a spererate file;
main.js
export const EventBus = new Vue();
menu.vue
<template>
<div class="menu">
<!-- import hamburgerButton component -->
<hamburger-button></hamburger-button>
<transition v-on:enter="enterMenuHandler" v-on:leave="leaveMenuHandler">
<div class="menu_wrapper" v-if="this.$store.state.menuIsOpen">
<ul class="menu_items">
<li class="menu_item" #click="toggleMenu">
<router-link class="menu_link" to="/">home</router-link>
<router-link class="menu_link" to="/contact">contact</router-link>
</li>
</ul>w
</div>
</transition>
</div>
</template>
<script>
import hamburgerButton from "hamburgerButton.vue";
import {EventBus} from './path/to/main.js' //or a path to file where you exported your EventBus
export default {
components: {
'hamburger-button': hamburgerButton,
},
methods: {
toggleMenu(){
this.$store.commit('toggleMenu');
EventBus.$emit('animate-hamburger-btn');
},
enterMenuHandler(el, done){
TweenLite.fromTo(el, 0.5, {
opacity: '0',
},{
opacity: '1',
onComplete: done
});
},
leaveMenuHandler(el, done){
TweenLite.to(el, 0.5, {
opacity: '0',
onComplete: done
});
},
}
}
</script>
set up a event listener on the event bus in the created hook and perform the animation on every animate-hamburger-btn event
hamburgerButton.vue
<template>
<div class="hamburgerButton" #click="animButtonHandler()">
<div class="hamburgerButton_inner" ref="hamburgerButtonInner">
<i class="hamburgerButton_icon></i>
</div>
</div>
</template>
<script>
import {EventBus} from './path/to/main.js' //or a path to file where you exported your EventBus
export default {
created(){
EventBus.$on('animate-hamburger-btn', () => {
this.animateBtn();
});
}.
methods: {
animButtonHandler (){
// toggle the state of menu if button clicked
this.$store.commit('toggleMenu');
this.animateBtn();
},
animateBtn(){
const isOpen = this.$store.state.menuIsOpen === true;
// anim the button
TweenLite.to(this.$refs.hamburgerButtonInner, 0.5, {
rotation: isOpen ? "43deg" : '0',
});
}
}
}
</script>
I have a simple Vue.js component in which I render a piece of HTML:
...
<div class="sml-button" v-on:click="toggleButton()" v-html="button"></div>
...
On click, the toggleButton() method updates the button data:
toggleButton: function() {
if (this.shouldBeShown) {
this.button = 'show less';
} else {
this.button = '<span>...</span>show more';
}
}
Notice the <span></span> element in the else.
What is happening, is I am unable to style this span element within my component - presumably because it's dynamically created:
<style lang="sass" scoped>
.sml-button {
color: #4390ca;
font-size: 14px;
font-family: latoregular, Helvetica, Arial, sans-serif;
span {
color: #3f3f3f; /* THIS WON'T BE COMPILED */
}
}
</style>
The parent class (.sml-button) has its styles. The child span doesn't.
How do I apply styles on a dynamically added HTML element inside of a Vue.js component?
Its working in root component and child component both
<template>
<template v-if="childDataLoaded">
<child-cmp :value="childdata"></child-cmp>
</template>
</template>
<script>
export default{
data(){
childDataLoaded: false,
childdata : [];
},
methods:{
fetchINitData(){
//fetch from server then
this.childdata = res.data.items;
this.childDataLoaded = true;
console.log(res.data.items) //has some values
}
}
components:{
childcmp
},
mounted(){
this.fetchINitData();
}
}
</script>
Here is the Nice and cleaner way to update child component.
var child = Vue.extend({
template: "<div>Child Component : <span class='light-blue'>My dynamicHTML</span></div>"
});
var app = new Vue({
el: "#vue-instance",
data: {
dynamicHTML:"Root Component : <span class='light-blue'>My dynamicHTML</span>"
},
methods : {
changeHTML: function(){
this.dynamicHTML = "Root Component Changed : <span class='light-green'>My dynamicHTML</span>"
}
},
components: {
child
},
})
.light-blue{
color : #f00;
}
.light-green{
color : #0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
<div v-html="dynamicHTML"></div>
<child></child>
<button v-on:click="changeHTML">Change HTML</button>
</div>