andyleach / vue-flash Goto Github PK

I love vue-flash, but I think that the .alert-wrap class should be hidden when the flash message disappears. Currently, it stays invisible on the screen, preventing the user from being able to click anything underneath it on the page.

Here's the lines of the class I'm referring to:

`ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-40d2a988","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vue-flash/src/Flash.vue
(Emitted value instead of an instance of Error)
Error compiling template:

• Do not use v-for index as key on children, this is the same as not using keys.

@ ./node_modules/vue-flash/src/Flash.vue 10:23-222
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/less/app.less ./resources/assets/rebrand-styles/less/index.less`

The weird quick fix is to add +0 to the index for the v-for. I'm sure there's a more elegant way of fixing this.

Hello,

I'm trying to use it with Laravel Framework and all I want to do is to flash a message after the user logged in. I can't figure out how to call it from PHP if a session is set. I have tried to call it between the script tag if a session is set and I don't think is best practices to follow.

Thanks

I'm attempting to use the vue-flash component via npm. I have it registered as a global component in my main.js file and can verify that via console.log(Vue.options.components). I can also see the event firing in the Vue DevTools (but can't see the component there). My problem is that I don't see any flash message visually in my app.

I have not used globally registered components before, so perhaps I'm missing something obvious?

Here's my test repo for proof (see main.js and HelloWorld component):
https://github.com/sdellis/vue-flash-test

Using laravel for example, how do I pass a message, type & props to this vue component?

Hi, thank for you share this component

I use the laravel5.8, and front-end use the Vuejs2, but I dont know how to use your component in my Vue.

Is there a way to indicate the position where the flash message appears?

@andyleach I just cloned your repo, ran 'npm run dev' and received a compling error

This dependency was not found:

* /var/www/html/tmp/vue-flash/demo/src/app.js in multi ./demo/src/app.js

I changed your webpack.mix.js from

mix.js('demo/src/app.js', 'demo') > mix.js('demo/app.js', 'demo')

then I was able to run 'npm run dev' successfully.

Maybe it's a bug from my app, but when I fire a flash message, the first displayed is not animated. The others are, only if the previous one is still displayed.

See my GIF here.

Thanks !

Possibilities:

1. Considering possibly removing "Success, Error, Info, Warning" from message body.
2. Tag on an extra parameter to allow more dynamic options instead of options listed above.

If I want to show multiple messages my website hangs (can't click anywhere. Opera and Edge and sometimes Firefox say that there is a script which solows the browser down).
I have to wait after messages are gone.

How to reproduce:

1. Setup like Readme
2. Call axios reguest and try to show an alle messages in response:

response.data.forEach(function(element) {
    flash(element, "success");
}); 

Hello. Are you still using vue-list and are you going to support it? Very interested in this package name. Thank you!