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

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