Adding a clear cache button with NetSuite API. When the button is clicked all the cache will be cleared: Template: <template> <div class=”dropdown float-right” @click.stop=”toggleDropdown”> <button class=”three-dots”> ⋮ <!– Unicode character for vertical ellipsis (three dots) –> </button> <div v-if=”isDropdownVisible” class=”dropdown-content bg-grey-300″> <button @click=”clearCache” class=”float-right py-2 text-black”> Clear… Continue reading Implement clear cache functionality with clear button in vue.js
Tag: vue
Computed Properties in Vue.js
Computed properties, which are used to derive data based on reactive state, it will provide a clean and efficient way to handle complex logic in your applications. What are Computed Properties? Computed properties are special properties in Vue.js that automatically update when their dependencies change. They are defined using the computed function and are cached… Continue reading Computed Properties in Vue.js
Handling Side Effects with watchEffect in Vue.js
Using watchEffect for Side Effects Side effects are operations that interact with the outside world or have effects beyond the function’s scope. With watchEffect, you can manage these side effects in a clean and reactive manner. Dynamic Data Fetching import { ref, watchEffect } from ‘vue’; export default { setup() { const… Continue reading Handling Side Effects with watchEffect in Vue.js
Using watchEffect in Vue.js
What is watchEffect? watchEffect is a function in Vue 3 that allows you to automatically track and react to reactive dependencies. It runs a given function immediately and re-runs it whenever any reactive dependencies change. Usage of watchEffect : To use watchEffect , you have to import it from Vue and pass it a function… Continue reading Using watchEffect in Vue.js
Handling Reactive Data Using ref in Vue.js
In Vue 3 is the ref is the function that is the part of the Composition API and is designed to handle reactive data in a straightforward and efficient manner. What is ref? The ref function creates a reactive reference to a value. When the value of a ref changes, Vue re-renders the component using… Continue reading Handling Reactive Data Using ref in Vue.js
Vue $emit() Method.
Emit a Custom Event There is a need to send information from the component to the parent, and we use the built-in method $emit() to do that. We already have the toggleFavorite method inside the FoodItem.vue component that runs when the toggle button is clicked. Now let’s remove the existing line and add a line to emit our custom event ‘toggle-favorite’:… Continue reading Vue $emit() Method.
Dynamic Routes in Next JS
This is about how to assign the pages dynamically from each API Creating a static page for calling the single landing page This is an example of the folder structure for the dynamic pages <Link key={index} href={`/case-study/${category.slug}`}> <div> <p className=’jjrewamp-casestudylistpage-secondsection-first-filter-list-category-1′>{category.name}</p> </div> </Link> This is call to the casestudy page inner page <Link href={`/case-study/${category_slug}/${caseStudy.post_name}`}><h3 className=”jjrewamp-casestudylistpage-secondsection-categorysection-title-h3″>{caseStudy.post_title}</h3></Link> here… Continue reading Dynamic Routes in Next JS
watch vs. watchEffect in Vue3
watch and watchEffect both allow us to reactively perform side effects. Their main difference is the way they track their reactive dependencies: watch only tracks the explicitly watched source. It won’t track anything accessed inside the callback. In addition, the callback only triggers when the source has changed. watch separates dependency tracking from the side… Continue reading watch vs. watchEffect in Vue3
Create an HTML file using Vue.js via CDN
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script> <title>Title</title> <style> </style> </head> <body> <div id=”app”> </div> </body> <script> const { createApp } = Vue; const app = createApp({ … Continue reading Create an HTML file using Vue.js via CDN
Vue 3’s @input: Empowering Dynamic User Input
Use of @input in Vue 3: The @input event listener in Vue 3 is employed to capture and respond to user input events, making it an indispensable tool for interactive web development. It is commonly associated with input elements, such as textboxes or textarea, and allows developers to respond dynamically as users type, providing real-time… Continue reading Vue 3’s @input: Empowering Dynamic User Input