Learning Vue.js — Day#3
Today’s goal was to create a component to manage the user input and call the api to search a tv show by name. To do that, I needed to bind the input to a ref variable and send the request. The first few attempts didn’t satisfy me, I also wanted to show something to the user when he types, so I decided to add autocompletion. This was tricky. I was looking for a ready-to-use component but I didn’t like anything I found so I decided to try to create one myself. I didn’t aim for elegance or the best way, I just wanted it to work .After several attempts, I come up with an ugly but working solution.
For the autocompletion, I used a bootstrap list-group with the router-link to hold every result of the query. I’m already thinking about extracting this as a proper component during refactoring but for now let’s focus and think about the overall result. Whenever the user types something, a call to the api is made and the result is shown as a list below the search box.
