When working with vue3, if I encounter a situation like this
watch(loading, (new_val, old_val) => {
// How can I determine whether this function was triggered immediately or after the initial run?
}, {immediate:true});
Is there a way to achieve something similar to this?
watch(loading, (new_val, old_val, options) => {
console.log(options.immediate); // Outputs true initially, then false on subsequent runs
}, {immediate:true});
Appreciate any assistance!
The initial value is undefined.
You can experiment with watchEffect, which immediately executes and captures all reactive values it accesses as watch values within the callback during the first run. In this case, there's no need to specify what to watch; it's automatically detected.
If you are not modifying anything in the callback, consider utilizing computed. watch and watchEffect are primarily used for side effects (modifications of variables/data).
<script setup>
import { ref, watch, reactive} from 'vue'
const msg = ref('Hello World!')
const loading = ref(false);
const log = reactive([]);
setTimeout(()=>loading.value = true);
watch(loading, (val, old) => {
if(old === undefined){
// immediate
log.push('immediate');
return;
}
// not immediate
log.push('not immediate');
}, {immediate:true});
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg">
<div v-for="line in log">{{line}}</div>
</template>
Vue 3 offers a way to check if a watcher function has run immediately by inspecting the flush option of the watcher. This setting controls when the watcher is activated and how it behaves.
watch(loading, (new_val, old_val) => {
// Your code
}, {flush:sync});
When you set flush to sync, the watcher's callback function will run right away during the component's setup phase, giving you the ability to determine its immediate execution status.
Please note: Using the sync flush option may impact performance since it triggers the watcher instantly and synchronously. It's advisable to use this feature judiciously and only when absolutely necessary.
Occasionally, my web page is displayed without a container and other times it's embedded within an igDialog of another container page, based on the user's navigation throughout our web application. Is there a way, using pure javascript or jQuery ...
Looking to implement a feature where I can easily upload files from Angular to PostgreSQL using a Golang API. In my Angular component, I need to convert my file into a uInt8Array. I have managed to convert the array, but it seems to be encapsulated in som ...
I am encountering an issue that requires me to pass some information along with a file to a controller using an Ajax call. The model structure is as follows: public class PersonModel { [Display(Name ="Full Name")] public string Name { ...
Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...
Currently, I am in possession of 2 instances of THREE.Vector3(). My task at hand is to create a circular shape around one vector with the second vector serving as a tangent. I have determined the radius of the circle geometry based on the distance betwee ...
Is there a way in Typescript to prevent assigning a Ref<string> to Ref<string | undefined> when using Vue's ref function to create typed Ref objects? Example When trying to assign undefined to a Ref<string>, an error is expected: co ...
I have the code snippet below for uploading a file: <a href="#" id="promotion_status_1"> <button type="button" class="btn btn-default brmodalbtn" data-toggle="modal" data-target="#BrandImageModal" id="1">On</button&g ...
I encountered an error while attempting to execute "ionic start MyApp" in the Windows terminal. This is a new machine and I have already reinstalled nodejs and ionic, but the same error persists. Can someone lend a hand? npm WARN tar invalid entry & ...
Within my website, I have a search engine that operates using ajax technology. My goal is to assign a unique <title> for every search request made. This involves modifying the title each time I receive a response from the ajax feature. I am wonderin ...
In my code, I have a for loop that looks like this: for(i=0; i<6; i++) { if(i = 0) {a1 = '<div>something1</div>';} if(i >= 1 & i <= 5) {b1 = '<div>something2</div>';} } document.getElementById(&apos ...
I've been exploring various examples but I'm still struggling to understand how it all functions. My goal is quite simple, or so I thought. I was hoping someone could assist me? The task at hand is to establish a server for clients to connect t ...
Here is a snippet of code showcasing a process involving multiple http requests and the use of promises: The first step involves calling a service to initiate an http request. Upon receiving the response, a map is created based on the data, which will be ...
Here is the HTML code snippet I am working with: <div id="addFieldUI" style="display: none"> <div> Field Name: <input type="text" /> </div> <div> Field Value </div> <div> Data Type: <select& ...
Looking to utilize the react-cube-navigation component, available here. Encountering a TypeError when attempting to run the provided example, React throws an error: TypeError: props.rotateY.to(function (x) { return "scale is not a function. ( ...
I've been working with React-Calendar and I'm facing an issue where the month doesn't change when clicking the navigation arrows in the calendar. Here's a snippet of my code: ... const onActiveStartDateChangeHandler = ({ activeStartDa ...
My challenge lies in working with an array of dates retrieved from the server to determine which dates should be disabled on the datepicker. getStaffAvailability(){ let x = this; this.$http.get(this.weeklyAvailabilityUrl + "GetAv ...
My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...
Is there a way to extract a specific string and save it as a variable? For example, if I have the following URL: http://sub.site.com/WordsHere-t.jpg I am looking to extract just WordsHere. The length of this string can vary and will not always be 9 chara ...
Here is the code snippet that I am currently working with: <div id="images" class="img"/> <img src="spiderman.png" alt=""/> <img src="superman.png" alt="" height="25%" width="25%"/> <img src="batman.png" alt="" /> </div> ...
Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...