Vue: forcing components refresh with keys

During my work with Vue, I had some strange issues with data reactivity. In theory, everything should be fine and clear, and it’s true… but only in simple cases. If we use arrays, objects and more complex structures, reactivity can me misunderstanding for us. There are several options how we can solve this problem, but most of them are very bad. Fortunately, there is one, but very good and will work in any case: using key attribute for component and other elements on our Vue template. This post is how use it and what should we avoid when we fight with reactivity.   

Continue reading “Vue: forcing components refresh with keys”

Use Vuex to avoid multiple requests from different components

JavaScript is asynchronous, it’s big advantage, but in some cases, also a big problem. The most popular mistakes relate to AJAX requests. Many people trying to do something before there is a response with data, and it cannot work. Now we can use many comfortable tools, and don’t have to remember about that – one of them is async/await. But sometimes, it can be still a problem. Let’s say, we use Vue, have one page with multiple similar components. Each of them needs some data from the same API endpoint, and calls request. In that case, we can’t use async/await, because there a lot of completely separate components. How can we avoid multiple requests then? There are few solutions, one of them is to use Vuex and this post is about that. 

Continue reading “Use Vuex to avoid multiple requests from different components”

Browsers JavaScript performance test

JavaScript Test

Browser is today one of the most important aplications – very often we don’t have to use other, specific aplications, we need only browser to open not only pages, but also complex internet services and apps, email clients, remote desktops, stream, play games or use social media. Most of these services are based on JavaScript, so performance in this area is very, very important for overall browser performance. There are many browsers, but we have only limited browsers engines now. I decided to made a small test and compare popular browsers JavaScript performance. Results are not surprised me, but have some interesting conclusions.

Continue reading “Browsers JavaScript performance test”

MongoDB – Natural sort

One of the most common problems with databases are sorting. Let’s see an simple example: we use MySQL/MariaDB and have table with some data. We want to sort this data. Everything is ok if we use only values in the same type in field, for example numeric (maybe some amount?), strings (titles), dates, keys etc. But what if field is custom, user-typed data and may contain many types? In that case, we have big problem, because standard sorting is not enought, it will not work. Example, value: “11”, “1”, “2”, “3”, “2a” will be sorted in order: 1, 11, 2, 2a, 3, not as we expected i.e. 1, 2, 2a, 3, 11. The solution is to use natural sorting.

Continue reading “MongoDB – Natural sort”

Vue – v-model with two-way data binding in custom component

Vue offers very nice binding and events system. We can create component, set some data using props, and also emit events from that component. If you read official Vue documentation, you can see examples for some standard form inputs. These examples using v-model and allows two-way binding without any additional code and without creating methods for events in parents – of course, we can still watch data from v-model. Can we use v-model way also in our custom components? Yes, it’s possible and very simple to do. See some examples.

Continue reading “Vue – v-model with two-way data binding in custom component”