Posts | Techformist

Practical guides, tutorials, and insights from years of building web and desktop applications. Check out code examples you can actually use!

Make an object non-reactive in Vue

Are you tired of Vue reactivity? Do you long for days when you had to manually refresh HTML pages to see changes? Or, do you have large objects and reactivity is killing your app? Vue has the answer. Vue enables this magic to respond to any changes in state on the UI. You can just declare variables in a component, and low and behold - they are reactive. <script> export default { data() { return { accounts:[], }; }, mutations: { setAccounts(state, accounts) { state.accounts = accounts }, addAccount(state, account) { state.accounts.push(account); } }; } </script> In the above example, accounts is reactive. Any changes to accounts is reflected on the UI without needing any other changes or logic. ...

Remember position history and navigate to anchors in Vue

You can remember the position in a view and navigate users to that position when they click on ‘back’. You could also navigate users to specific anchor links in a long page. Vue helps you to create a great single page application. Navigation between views is almost seamless and “feels” really fast. This magic of front-end routing is enabled by the Vue router. A simple router code-fragment looks like this - ...

How to break reactivity in Vue for arrays and objects?

Let us move to the dark side and break some things. We will start with Vue’s reactivity. See a couple of commonly used patterns to break reactivity in arrays and objects. And oh, there are ways of working around that if you are into boring stuff. All the below things applicable to Vue 2 btw. Direct Array Assignments Let us try out with the following code - <!DOCTYPE html> <html> <head> <title>Test Reactivity</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app" style="text-align: center"> <button @click="addToNumPush()"> Add to Nums (Push) </button> <button @click="addToNumDirect()"> Add to Nums (...) </button> {{ nums }} </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { counter: 0, nums: [1, 3] }, methods: { addToNumPush() { this.nums.push(this.counter++); console.log(this.nums); }, addToNumDirect() { this.nums[10] = 99; console.log(this.nums); } } }); </script> </body> </html> As you can see, the first button makes changes to the array nums and those changes are immediately available on button click. The second button does not seemingly make any changes. However, you will see from the console statement in developer tools that the array has indeed changed. ...

A shorthand to call same method in created and watch

Use a less known property called immediate to call a function during created and in watch. Take the below scenario - Component needs to fetch data from server to get contact detail when user clicks on a specific contact in a list User can use arrow keys to fetch next or previous contact by clicking arrows on the component One of the typical ways to address this requirement is to call the fetchContact method ...

Type cast in style in a Vue component

Do you type cast in Vue? Of course you do. So, is there a way to just not use Javascript shortcuts since they are so cumbersome? Really? You find this cumbersome? let myNumStr = +myNum; let myStrNum = "" + myStr; See more at type casting in Javascript and shortcuts to type cast. Regardless of your opinion, with Vue you now have the option to see more.. options. See below - <template> <input v-model.number="position" type="number" /> </template> <script> export default { data() { return { position: 0 }; } }; </script> Bad news if you wanted to go overboard with this - number is literally the only thing supported here. So, back to the cumbersome Javascript type conversions for rest of the use cases. ...

Extend a component to create cool stuff

Vue enables you to extend a component, thereby carrying forward all the base elements and add some more. This is one of the efficient ways for component composition. Let’s say you have a simple panel that you use everywhere -  <template>   </template> Now, you get this super idea to include a title in the panel. Normally you would just have a tag that conditionally renders based on prop and thereby control whether title shows up or not. ...

All Useful Properties when Initializing Vue

Struggling to copy/paste all useful properties when initializing Vue? Looking to see what else Vue can do for you? Here’s the answer. We have seen how Vue can be used from CDN. Initializing Vue is simple enough - // main.js new Vue({ el: "#app" } }); The above code block will initialize Vue and load it to element with id app. As we have seen previously, we can use a bunch of properties during initialization and make Vue super useful. ...

Shortcut to initialize objects

Here’s a quick and more readable way to initialize objects from other variables. But, first - how do you normally define objects? const nums = {}; I mean.. initialize objects - from other variables. let x = 2; let y = 4; const nums = { x: x, y: y }; console.log(nums); // { x: 2, y: 4 } You can do the same without using named variables if you like. let x = 2, y = 4; const nums = { x, y }; console.log(nums); // { x: 2, y: 4 } The same holds true for more complex objects as well. ...

Create a field with a simple date picker in Vue

Do not reinvent the wheel to create your own date picker component. Just use one of the existing components and praise those developers who share great things. I have historically struggled with date pickers and had finally settled in on a good date picker for Vuetify. Since most of my Vue projects are standardized on Materialize, that posed no issues. However, if I need to create something outside of Vuetify, the available options suddenly explode to my utter delight. I have not really dug deep - but the aptly named ‘vuejs-datepicker’ checks all the boxes. ...

Use Array Fill to Create Magic

How to use Array.fill() to your fill. We have seen examples of how to use Array.fill() to quickly fill data in an array. But, can we do more? Yes..! You can generate array with sequential numbers. Use Array.fill() to line up your number array in sequence. const nums = new Array(10).fill().map((val, index) => index + 1); console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Note technically an array.fill(), but you get it :)