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? 1 2 let myNumStr = +myNum; let myStrNum = "" + myStr; See more at type casting in Javascript and shortcuts to type cast.

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 - 1 2 3 4 5 <!-- MainPanel.vue --> <template> <!

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 - 1 2 3 4 5 // main.js new Vue({ el: "#app" } }); The above code block will initialize Vue and load it to element with id app.

Here’s a quick and more readable way to initialize objects from other variables. But, first - how do you normally define objects? 1 const nums = {}; I mean.. initialize objects - from other variables. 1 2 3 4 5 let x = 2; let y = 4; const nums = { x: x, y: y }; console.

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.

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. 1 2 3 const nums = new Array(10).

How can we use our beloved bubble sort in Javascript? We have seen examples of how to sort an array and sorting with multiple attributes. The easiest way is to sort an array is to just use Array.sort(). But that alone will not show you the complexity that you want to show in your program (for e.

Let us see how to execute a specified function only once in the life time of the program. The Simple Way The easiest way is to use a global variable and remember the function execution. We can then ignore all future invocations. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 let saidHello = false; function sayHello() { console.

Debouncing a function gives us a way to wait for input to stop and only then trigger a set of actions. This is particularly useful when we have to call a function only when user input is complete (or there is a gap in typing that we can utilise for processing).

Let us create a dead simple calculator using Vue. Create basic structure As it was earlier, the basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!-- index.

Let us create a small example to-do app using Vue from CDN. There is not going to be any backend for this application. Create basic structure The basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 <!-- index.

There are multiple ways of using VueJS - which should you use? VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app. Use in package with a build cycle This should be your preferred way of using Vue.

How do you return anything from async functions? How do you receive what is returned from async functions? Previously we have seen how return works in Javascript. I typically write functions that return at least a true or false value. 1 2 3 4 5 6 7 8 9 10 11 12 function printThis(statement) { console.