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

  <!-- <a-input placeholder="Weightage" v-model="$data['form'][item.weightProp]" ></a-input> -->       // if item.weightprop='test' // form.test 

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

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

How to create a simple application using vue js that stores your daily expenses in a dyanamic form and calculates the total sum that has following fields : Name Amount  Date JS fiddle :  https://jsfiddle.net/gitamgadtaula/cbzfj9vn/6/   SOURCE CODE : 

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/

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

Good news for all Nepalese out there. NTC has just installed facebook Cache server in Nepal with the collaboration with Facebook to bring its cache server to Nepal. This means now facebook can be accessed faster and in cheaper rate from Nepal. It will be applicable for all ISPs s ince all the ISPs of Nepal are the members of NPIX (Internet exchange Nepal).  NTC previously installed Google cache server with the collaboration with Google Inc. making google services like gmail, youtube, google drive, etc faster. In recent years, NTC has become the pioneer telecommunication company of Nepal. What is a cache? A cache (pronounced CASH) is a place to store something temporarily in a computing environment. In computing, active data is often cached to shorten data access times, reduce latency and improve input/output (I/O). Because almost all application workload is dependent upon I/O operations, caching is used to improve application performance. What does a cache ser...

If you are new on PHP and MYSQL and wondering how to fetch just n numbers of records from a database table and group them by ascending or descending order, then you are at right place. Lets suppose a database table as below: Database name : “comments” Table name : “comments” Fields  id (Auto-increment) name (varchar 100) comment (varchar 100) Mysql statement to fetch 5 latest records and sort by descending order  SELECT * FROM comments ORDER BY id DESC LIMIT 5 Full Php Code: <?php $hostname="localhost"; $username="root"; $password="root"; $conn=mysql_connect("$hostname","$username","$password"); mysql_select_db("comments"); //default password for mamp is "root" and for xampp is empty $find_database = mysql_query("SELECT * FROM comments ORDER BY id DESC LIMIT 5"); if (!$conn) { echo "Unable to connect to DB: " . mysql_error(); exit;...

C program to read the nth line of a file.  This file handling C program illustrates how to read the nth content of a text file.  Suppose your text filename is "documents.txt" and you want to read only 9th line of that file. Here's a source code to do so. #include <stdio.h> int main () { FILE * file = fopen ( "documents.txt" , "r" ); char line [ 256 ]; int i = 0 ; while ( fgets ( line , sizeof ( line ), file )) { i ++; if ( i == 9 ) { printf ( "%s" , line ); } } fclose ( file ); return 0 ; } Similarly if you want to read only the 1st/2nd/3rd/4th/5th or any other line then just run variable i till your desired line.   For example if i  want to read the 10th line of the same file if ( i == 10 ) { printf ( "%s" , line ); }

Instagram does not allow its users to download its pictures/images and videos. But what if you need to download it? Well, there's always a backdoor to something. But for this method, you will need a PC. This does not work on Instagram app. Here's a youtube video that will guide you through a simple way to download images and videos from instagram.

First thing first. You will need a little bit knowledge of web programming. Simple HTML will work. Now here is a step by step procedure on how to connect php to mysql database using local server. Lets create a simple comment box. And I will teach you how to do this on both Mac or windows/Linux. Here is a list of Applications you need before doing some coding. A text editor ( I would recommend Sublime text ) A local server software ( MAMP for mac , Xampp for windows/linux) Now that you have downloaded your local server software, install it and start the servers. If you are on mac follow the screenshot to start up the servers. Bravo ! Your computer is now a server (local though). If you are on windows/Linux follow the similar procedure to start your servers.  Now lets get into some simple coding. Since we are going to make a simple comment box, lets create two files "comment.php"and "comment_post.php" inside htdocs folder. Note : Your def...