In this article, we are going to learn how we can communicate between components in Vue.js. There are 5 ways we can do it. Here’s how.
Every framework has its own unique architecture but they have one thing in common. The entire page is divided into small components where the component has its own functionalities and UI. And sometimes, we need a way to communicate between these components.
Generally, we use Vuex (State management tool) to store the data and use it across components. But sometimes, we need a way to send the data from one component to another without…
Recently I worked on a project where we had to make a custom image gallery. The requirement needed me to place many components like icons, texts, another image, and many other things on the image. While doing that, I learned about the steps to overlay the components on the image which I would like to share. Let's build a video player page to understand how the overlaying of icons works in CSS.
Let’s consider the below template. …
I was working with a rich text editor the other day and needed to strip the HTML tags from the string and store it in the database. In doing so, I learned a few different methods to achieve this. I wanted to share this information with you as it could come in handy for anyone who is trying to do the same.
What we are trying to do is remove the tags from the string and make the string printable as plain text. Let’s dive in and see how it works.
1. Using .replace(/<[^>]*>/g, ‘’)
This method is a simple and efficient way to…
Here are 3 ways that you can check
I was building a form the other day in Vue and I had to write number validation for the field so had to write the logic to check whether the input value is number or not. I wanted to list out the few ways I learnt which might be helpful to others.
Note: In JavaScript, special values like NaN, Infinity and -Infinity are numbers too - though, we'll be ignoring those values.
1) Using isNan()
The isNaN() determines whether a value is NaN or not. We can take advantage of this to determine whether a variable is number type or not.
!isNaN(34)…An array is an ordered collection of values: each value is called an element, and each element has a numeric position in the array, known as its index.
JavaScript lets us create arrays inside array called Nested Arrays. Nested Arrays have one or many arrays as the element of an array. This might be little confusing in definition but it is very interesting once we dig inside.
Creating a Nested Array
There are three syntax to create an array in JavaScript. Let’s create nested arrays using those three methods to get an idea of Nested Arrays.
This one is just equating the variable to…
Every value has truth or false values in JavaScript. For example, a `null` value has an associated boolean value of false. Similarly `34` has an associated value of true. We can use this to cast a variable to true or false using the double bang operator.
Let’s dive deep into what it is and how it works.
The ! in JavaScript, also called “bang”, is the logical “not” operator. If you place this operator in front of a boolean value, it will reverse the value, returning the opposite.
!true // returns false
!false // returns trueisTrue = true //…
The Arrays are for JavaScript developers like screws and nails are for carpenters. Hence it is important to know the in and around with how it works. Emptying an array is one of the important concepts involved so here are the few methods I know.
1) Using length property
The length property returns the number of elements in that array. And if we equate this to 0, we will be able to empty the array elements. This method is quite popular but not the fastest way to do the job.
baratheon = ["Robert", "Renly", "Stannis"]baratheon.length = 0console.log(baratheon) // expected result: [] console.log(baratheon.length)…
In JavaScript, you can represent a number as type number (ex. 12), or as a type string (ex. '12'). At times while coding we might have to convert the data from one type to other. I would like to list few of the methods I know of data conversion from number to string and vice-versa.
Number to String
1. Using toString() method
There is a default string method that converts the data to string. The toString() method returns the value of a String object.
myNumber = 100
myNumber.toString() // expected result: '100'noNumber = NaN
noNumber.toString() // expected result: 'NaN'decNum = 122.33
decNum.toString() …
More often we are struck with the simplest problem that can be solved very easily. We know the solution for the problem would be very easy, yet it is hard to come up with the solution. It gets overwhelming with all the new concepts and various things that are available online. This was one such problem for me when I started with JavaScript initially. So today I would like to list out the ways to check if the property exists in an object.
1) Using Object method hasOwnProperty()
The most common solution would be to use hasOwnProperty() which is one of the common object methods…
Package.json is a file in the root directory of a Node.js project that holds various information relevant to the project. This file gives information to npm that allows it to identify the project as well as handle the project’s dependencies.
It can also contain other metadata such as a project description, the version of the project in a particular distribution, license information, even configuration data — all of which can be vital to both npm and the end-users of the package.
A package.json file:
- lists the packages your project depends on
- specifies versions of a package that your project can…
