Skip to main content

Posts

Showing posts from 2020

Using reference in vue js

Refs are one of the most important feature of Vue js. Be it calling a method of another component or assigning property of one element to other, as you grow to become an immaculate vue developer, you'll find the immense need and rich potentiality of refs.  Suppose you want to customize things but there aren't default way of doing so. This is where vue refs could be useful. For example if you want to style input file type and you are not using any component based design, this could be of great help. So, lets dive in.  <div class= "container" > <div class= "input-file" @ click= "uploadFile" > <input type= "file" style= "display:none;" ref= "fileUploader" /> Click the image to upload file .... <br /> <img src= "uploadImg.png" style= "width:400px;height:200px;" > <p class= "text" ...
Post a Comment
Read more

How to render v-if condition using the index of a loop in Vue JS.

v-if=array[index] not working If you are new to Vue you may not be familiar with this limitation of this framework. Actually its not a limitation of Vue js. It happens because Vue cannot detect the changes of an array element directly, this is one of the limitation of JavaScript.  But thankfully, Vue has a solution for this, as always .  This is the problem I faced while working on my project, I spent quite a few hours wondering what went wrong because everything I did was correct. After spending few hours debugging and googlilng I found out that Vue cannot detect the change in array directly. But as already mentioned vue has a way to solve this. Vue provides a helper function Vue.set() which changes the array element and makes it reactive. this.show[index] = !this.show[index] //simply doing this does not work. So we have to Use Vue.set helper function this . show [ index ] = ! this . show [ index ] //simply doing this does not work. So we have to Use Vue.set helper fun...
Post a Comment
Read more

Using map(), reduce() and filter() array methods to nail Javascript manipulation

While working on a real life project we often have front end separated from backend by API, which is a standard modern method as of today. But the data given by backend API is not always favorable for the frontend. And such scenario in real life is imminent and it is not always possible to write a new API for every desirable data in frontend which can be manipulated. But this scenario is not necessarily only useful on frontend, but also could prove very significant on backend too.  map  creates a new array by transforming every element in an array, individually.  filter  creates a new array by removing elements that don't belong.  reduce , on the other hand, takes all of the elements in an array, and  reduces  them into a single value. map → Executes a function on each element of an array filter → Remove items which don’t satisfy a condition Reduce → Creates a single value from elements of Array Array.prototype.map() The  map()  method  ...
Post a Comment
Read more

Instant search with Vue js and axios using filter in computed property.

Vue js is an excellent framework. It's main beauty lies in its reactivity. Its reactivity can be used to solve many problems from the frontend without having to write additional routes on backend api. This post demonstrates how can we use vue js reactivity to make an instant search as you type using the filter method in computed property. There are few things you should know about vue js before jumping into this post. Vue reactivity  Vue lifecycle Http request using axios Rest API (also Fake Rest API) I am writing this blog for future reference for myself but in the meantime it could be useful for anyone, especially beginners like me. Now, lets make an instant search input box to filter data that comes from Lorem Picsum Web API. The Lorem Picsum web API gives response in following format. [ { " id " : " 10 " , " author " : " Paul Jarvis " , " width " : 2500 , " height " : 1667 , " url ...
Post a Comment
Read more

Dynamic form addiition and deletion in vue js

How to perform dynamic Form addition and deletion in Vue js ? Dynamic element manipulation is the backbone of any dynamic web application of modern times. Static codes or User Interface are not any more relevant. Dynamic manipulation saves us time and resources, reduces code redundancy and looks pretty in the eyes. To start with this concept below here is a very simple source code of dynamic form addition and subtraction and the data manipulation of their respective form index using Vue js. I have used bootstrap for a very minimalist design and vue cdn for this example. See this demo on JsFiddle . JSFiddle: https://jsfiddle.net/gitamgadtaula/hmojwbpL/2/
Post a Comment
Read more

Vue js very simple Todo app for begineers

How to create a very simple and minimalist Todo app with Vue js ? A todo app is a very important concept for programming newbies. It includes handling of dynamic form, its data and array manipulation. This is the basis of any big dynamic user interface. And its a often obvious task for the new Interns in almost any company. So below here is a very very simple Todo app, which just takes an input from user and stores each todo in an array.  Click the js fiddle link below to see the demo : JS fiddle : https://jsfiddle.net/gitamgadtaula/cbzfj9vn/14/ <!DOCTYPE html> < html lang = "en" dir = "ltr" > < head > < meta charset = "utf-8" /> < title ></ title > </ head > < body > < div class = "cart" > {{myText}} < br /> < input type = "text" v-model = "myText" value = "" @onclick = "add()" /> < button @cl...
Post a Comment
Read more