Excellent explanation, but my opinion is filteredStates as computed property is better. Your method will be executed every key stroke, even if nothing has changed in your filteredStates array. It‘s better performance-wise if you using a computed property in this case.
@@floflo111 If you're having problems with the tailwind directive ("@tailwind" in your CSS file), try importing the files instead of using the directives (it worked for me). Still run 'npx tailwindcss init', and add a 'postcss.config.js' file to the root of your project, following along with the video and adding the plugins. Then, after that, fix the tailwind directives. So replace: @tailwind base; @tailwind components; @tailwind utilities; With this: @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
@@robertstefanic4001 thanks for reply, I thought I deleted this comment. Just created a new js file with that name and wrote the code. It worked fine, but I will try your solution also. Thanks
@@CodersTape yeah you are right if you use click event on list items. But if you use @mousedown instead of click on list items, mousedown event will trigger before blur, so it will work. By the way, love your videos. Just trying to give you my thoughts.
That's a good alternative. Either one would work. And thanks for your comments, I love hearing the feedback, keep them coming. I always find myself looking at all of the different ways to solve problems, I don't always have the best answer! :)
I know im randomly asking but does anybody know a method to log back into an instagram account?? I was stupid forgot the password. I would appreciate any help you can offer me
@Kasen Ronin I really appreciate your reply. I found the site on google and I'm trying it out atm. I see it takes a while so I will reply here later when my account password hopefully is recovered.
[vue/valid-v-for] Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.eslint-plugin-vue i have this error in ul>li inAbout.vue what i must to do?
i just getting started with vue, i followed your instructions but there is no postcss.config.js file in my directory for setup tailwindcss, i tried to create one but that not work for me. need help
if you are already created postcss.config.js then just add the extension in vscode(i'm using vscode) this is extension check this github.com/postcss/postcss#editors--ide-integration
Hi ! I try to get data from my database so I have created an API to fetch the data I need but I don't know how to get them for my component. How do you do it ? Thanks !
You can pass the data from the API as a property to the component, e.g. in Laravel blade view: . If you don't use Laravel but, for example, a Vue single page application, you can use Axios to fetch your data from the API directly into the autocomplete component.
Doesn't seem to work when I fetch my data from an endpoint, though. It only works if the data is hardcoded in the Vue file. Any clue why that might be the case?
So but when i clear my Input now, i get a list with all entries in the total List, is there any way to make it shorter? 500 items are not the best to show on mobile
After typing, suppose Alas for Alaska, when I backspace the letters to have no value in input box, all the suggestions are displayed.. any alternative?
If anyone is struggling to complete this exercise, I finished it on JSFiddle to get the countries list from an API, hope somebody finds it useful: jsfiddle.net/qtLk3u8j/35/
Excellent explanation, but my opinion is filteredStates as computed property is better. Your method will be executed every key stroke, even if nothing has changed in your filteredStates array. It‘s better performance-wise if you using a computed property in this case.
That’s a great observation. And I agree. A computed property would have some performance benefits.
For anyone building this in vue 3, at 6:25, dont add the "this." in front of "state" on line 22 as this will cause an error.
if you dont want to build a div in minuto 11:40, you can use this:
And create a method:
desactivate(){
setTimeout(() => this.modal = false, 100);
}
If you don;t have a post.css.config:
Run:
npx tailwindcss init
Which will make an tailwind.config.js
And use this
it doesn't work for me
@@floflo111 If you're having problems with the tailwind directive ("@tailwind" in your CSS file), try importing the files instead of using the directives (it worked for me). Still run 'npx tailwindcss init', and add a 'postcss.config.js' file to the root of your project, following along with the video and adding the plugins. Then, after that, fix the tailwind directives.
So replace:
@tailwind base;
@tailwind components;
@tailwind utilities;
With this:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@@robertstefanic4001 thanks for reply, I thought I deleted this comment. Just created a new js file with that name and wrote the code. It worked fine, but I will try your solution also. Thanks
you could use blur instead of clicking a wrapper. Like focus shows, blur hides.
It wouldn’t work when you click on one of the filtered states. Give it a try.
@@CodersTape yeah you are right if you use click event on list items. But if you use @mousedown instead of click on list items, mousedown event will trigger before blur, so it will work. By the way, love your videos. Just trying to give you my thoughts.
That's a good alternative. Either one would work. And thanks for your comments, I love hearing the feedback, keep them coming. I always find myself looking at all of the different ways to solve problems, I don't always have the best answer! :)
@@dramen555 Thanks, I resolved same issue with your hint. ;-)
Just found your channel and I love it!
Enjoy!
nice tutorial , thank you.
after setState I did like this
setState(state){
this.state = state
this.filteredStates = []
}
wow nice alternative. thanks
I follow all instruction from your video, but i cant find file post.css.config after run Vue CLI
i think it's a version issue, however, the documentation say that vue use postcss internally so i just create the file and it worked.
Great tutorial!! question, what extension do you use ( Code ) to show the contextual menu options while you type? thanks
Great job, but i think there is a bug...
if you set "position absolute inset-0" you can't click the Home in the main App.vue
Superb. .. but auto complete data should come from laravel backend. ....thanks
Certainly!
@@CodersTape yeah
Thanks, good video, very useful
Wow thanks for the video, i wish if you can create new video like with axios
This is some nice level of work. Please keep going....
Great explanation, very very clear!! Thanks a lot men!!!
Nice tutorial, thank you!
Thank you so much!!!
Amazing video
Please I really want laravel socketio (no pusher) realtime chat with rooms (dialog). Please men
Thanks for this! Really nice approach and looks like it can easily be reused across projects.
I know im randomly asking but does anybody know a method to log back into an instagram account??
I was stupid forgot the password. I would appreciate any help you can offer me
@Rodrigo Luka Instablaster =)
@Kasen Ronin I really appreciate your reply. I found the site on google and I'm trying it out atm.
I see it takes a while so I will reply here later when my account password hopefully is recovered.
@Kasen Ronin It did the trick and I actually got access to my account again. Im so happy!
Thank you so much, you really help me out :D
@Rodrigo Luka glad I could help xD
[vue/valid-v-for]
Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.eslint-plugin-vue
i have this error in ul>li inAbout.vue what i must to do?
You need to add :key to each of tag here
The BEST as always!
How to apply minLength for autocomplete here? For example after 3rd char, autocomplete should appear.
Thank u bro :D
i just getting started with vue, i followed your instructions but there is no postcss.config.js file in my directory for setup tailwindcss, i tried to create one but that not work for me. need help
me too, it is not generated at create time, dont now what to do
if you are already created postcss.config.js then just add the extension in vscode(i'm using vscode)
this is extension check this
github.com/postcss/postcss#editors--ide-integration
sir please upload a project with vue.js and laravel.bye the way thank you for this tutorial
Hi ! I try to get data from my database so I have created an API to fetch the data I need but I don't know how to get them for my component. How do you do it ? Thanks !
You can pass the data from the API as a property to the component, e.g. in Laravel blade view: . If you don't use Laravel but, for example, a Vue single page application, you can use Axios to fetch your data from the API directly into the autocomplete component.
nice
i see the postcss.config.js. How to add the file postcss.config.js?
First! Thanks for this amazing tutorial!
Happy to help
Doesn't seem to work when I fetch my data from an endpoint, though. It only works if the data is hardcoded in the Vue file. Any clue why that might be the case?
Eu também estou com esse mesmo problema, como você resolveu?
What was the reason for writing all of this?
When you could achieve the same effect by just adding an @blur event like below?
@blur="modal = false"
Hi how to input data to autocomplete
filteredStates should be computed then you'd have much shorter code. no mount no watch
So but when i clear my Input now, i get a list with all entries in the total List, is there any way to make it shorter? 500 items are not the best to show on mobile
Answer is v-for="item in list.slice(0,5)".... shows only 5 entries in total
After typing, suppose Alas for Alaska, when I backspace the letters to have no value in input box, all the suggestions are displayed.. any alternative?
add if condition like this. if (this.state.length>0) { return state.toLowerCase().startsWith(this.state.toLowerCase()) }
where is the code of that auto-complete input
i using laravel with npm install. and can not find tailwind.js under resource directory...with out tailwind its not working
If you mean the tailwind.config.js file, then that needs to be created using npx. Look at the tailwind documentation installation section, to find it.
If anyone is struggling to complete this exercise, I finished it on JSFiddle to get the countries list from an API, hope somebody finds it useful: jsfiddle.net/qtLk3u8j/35/