Load More Records on Button Click with Vue.js and PHP

The number of records displays on the page affect the load time of a webpage.

To improve response time you can show limited records at a time using pagination.

There are various types of pagination available.

One of them is a load-more type.

It adds new records at the end when it gets clicked until records are found.

In this tutorial, I show how you can implement load more functionality on your webpage with Vue.js and PHP.

Load More Records on Button Click with Vue.js and PHP

Read more

Dynamic Dependent Dropdown with Vue.js and PHP

Auto-populating records based on the selection make it easier to control the flow of inputs and the user is restricted on the selection.

Data is updated on dependent dropdown according to parent dropdown selection.

To send an AJAX request in Vue.js I am using the Axios package.

In this tutorial, I create 3 dependent dropdowns for the country, state, city, and send AJAX request to load records whenever dropdown value changes with Vue.js and PHP.

Dynamic Dependent Dropdown with Vue.js and PHP

Read more

Live Remaining and Character counter with Vue.js

The live character counter is very useful when it needs to validate the user from entering more input or display warning message.

Character count visible on the screen while inputting character in the input box.

This notifies the user how many characters are left or the total number of characters is been entered.

In the tutorial, I show how you can count the total and remaining characters using Vue.js.

Live Remaining and Character counter with Vue.js

Read more

Copy text to Clipboard using vue-clipboard2 – Vue.js

Copying the selected text from the webpage or input HTML element is easy with the keyboard shortcut CTRL+C and context menu.

To make it little easier for the user you can add a button.

For copy text to the clipboard in Vue.js, you can use the vue-clipboard2 package.

In this tutorial, I show how you can copy text from an HTML element on a button click to the clipboard.

Copy text to Clipboard using vue-clipboard2 – Vue.js

Read more