In Vue.js, directives are special tokens in the markup that tell the library to do something to a DOM element.There are several built-in directives in Vue.js. Here are some of the most commonly used ones: v-bind: Used to dynamically bind one or more attributes or properties to an element. v-model: Creates a two-way binding on… Continue reading Types of Directive available in Vue.js?
Author: Mukil Mukesh M K
What is the use of Vue-router?
Use of Vue- Router? Vue Router is the official routing library for Vue.js, which is a popular JavaScript framework for building user interfaces. Vue Router allows developers to build single-page applications (SPAs) with Vue.js by providing the capability to navigate between different views or pages within the application without causing a full page refresh. Here… Continue reading What is the use of Vue-router?
Example for Custom Email Validation in vue.JS
Html Code: <form id=”app” @submit=”checkForm” action=”https://vuejs.org/” method=”post” novalidate=”true” > <p v-if=”errors.length”> <b>Please correct the following error(s):</b> <ul> <li v-for=”error in errors”>{{ error }}</li> </ul> </p> <p> <label for=”name”>Name</label> <input id=”name” v-model=”name” type=”text” name=”name” > </p> <p> <label for=”email”>Email</label> <input id=”email” v-model=”email” type=”email” name=”email” > </p> <p> <label for=”movie”>Favorite Movie</label> <select id=”movie” v-model=”movie” name=”movie” > <option>Star… Continue reading Example for Custom Email Validation in vue.JS
Conditional Rendering in vue.js
v-if In string templates, for example, Handlebars, we would write a conditional block like this: <!– Handlebars template –> {{#if ok}} <h1>Yes</h1> {{/if}} In Vue.js, we use the v-if directive to achieve the same: <h1 v-if=”ok”>Yes</h1> It is also possible to add an “else” block with v-else: <h1 v-if=”ok”>Yes</h1> <h1 v-else>No</h1> Template V-if Because v-if is a directive, it has… Continue reading Conditional Rendering in vue.js
Plugin for creating an submenu in wordpress
Insert the below code as a plugin in WordPress. code: <?php /* Plugin Name: Custom Department Plugin Description: Adds a custom menu for departments. Version: 1.0 Author: Mukil Mukesh M K */ function custom_department_menu() { add_menu_page( ‘Departments’, ‘Departments’, ‘manage_options’, … Continue reading Plugin for creating an submenu in wordpress
How to create a new field in the WordPress user section?
Example: Creating a new field named Skills Step 1: Write the below-given code in function.php in the current theme. function wk_custom_user_profile_skills_fields( $user ) { ?> <h3 class=”heading”>Skills</h3> <table class=”form-table”> <tr> <th><label for=”department”>Skills</label></th> <td> <textarea name=”skills” id=”skills” class=”regular-text”><?php echo esc_textarea( get_user_meta( $user->ID, ‘skills’, true ) ); ?></textarea> </td> </tr> </table> <?php } add_action( ‘show_user_profile’, ‘wk_custom_user_profile_skills_fields’ );… Continue reading How to create a new field in the WordPress user section?
How to convert the inner div elements into tabs?
Step 1: Install react-tabs: npm install react-tabs Step 2: Import necessary components and use Tabs and TabList to create tabs: import React from ‘react’; import { Tab, Tabs, TabList, TabPanel } from ‘react-tabs’; import ‘react-tabs/style/react-tabs.css’; const EditProfile = () => { return ( <div className=’editprofile-left-main-second-div’> <Tabs> … Continue reading How to convert the inner div elements into tabs?
How to remove srcset in the image tag which is migrated from WordPress?
Without removing srcset the code will be as shown below: <img loading=”lazy” decoding=”async” width=”612″ height=”173″ src=”http://jobinandjismi.in/wp-content/uploads/2022/03/image-43.png” alt=”” class=”wp-image-12981″ srcset=”https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43.png 612w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-300×85.png 300w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-60×17.png 60w, https://wp.jjknowledgebase.com/wp-content/uploads/2022/03/image-43-150×42.png 150w” sizes=”(max-width: 612px) 100vw, 612px”> The image will be as shown below: The following steps should be taken to fix the: Step 1: At first, we need to create a… Continue reading How to remove srcset in the image tag which is migrated from WordPress?
How to make An input box as both Search-box and select-box on next.js
Below is the code for making an input box to both the search and select box const CreateArticle = () => { const [tags, setTags] = useState([]); const [searchTerm, setSearchTerm] = useState(”); const [selectedTags, setSelectedTags] = useState([]); const [activeTab, setActiveTab] = useState(“create”); // “create” or “preview” const [newTag, setNewTag] = useState(”); /* Tag section*/ //… Continue reading How to make An input box as both Search-box and select-box on next.js
To display tags in the preview section on Knowledge base
<p className=“post-main-header-categoryTags text-left mt-5 mb-2”> <span className=“popup-knowledgebase-forumTagSpan “>Tags:{” “}</span> <p className=‘popup-knowledgebase-forumInnertag’> {previewContent.selectedTags .map((tagId) => { const tag = tags.find((tag) => tag.id === tagId); return tag ? tag.name : tagId; // Use tag name or tagId as per your data structure }) .join(“, “)} </p> </p>