How to and Why is - A blog dedicated to News and tutorials

 https://jsfiddle.net/gitamgadtaula/ombfygqj/2/

 https://1linelayouts.glitch.me/

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" ...

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...

Vue js is a component based framework. A vue js application in real life can have many components. So theres has to be some way to make a communication possible between these components back and forth. A communication means the way of passing data.  Child.vue  Parent.vue

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  ...