I have a dynamic select list in my app built with vue.js. I am trying to update a "details" box on the page with information fetched through an ajax request. You can view the code here: https://jsfiddle.net/pznej8dz/1/
I am puzzled as to why the sf_detail data does not reflect the updates when the object is modified from the webservice call. Is there a better approach to achieve this in vue?
Your object references seem to be out of sync! When you call getSourceFieldDetails, it causes the objects referenced by field and sf_detail to become different.
In the script's beginning, an object is created:
{
Name: 'Test',
Label: 'Data',
Type: 'Boolean'
};
This object is then assigned a reference named sf_detail.
In the code block where sf_detail_info is defined, field is set to reference the same object as sf_detail:
data: {
field: sf_detail
}
However, in the function getSourceFieldDetails, sf_detail is updated to point to a new object. This means that while sf_detail now points to the new object, field still holds a reference to the old one.
To resolve this issue, avoid assigning a new object to sf_detail. Instead, update the properties of the existing object. The revised version of getSourceFieldDetails looks like this:
function getSourceFieldDetails(val) {
// This would typically fetch data from an API endpoint
console.log(val[0]);
sf_detail.Name = val[0];
sf_detail.Label = val[0] + 'Label';
sf_detail.Type = val[0] + 'DataType';
console.dir(sf_detail);
}
You can find a modified version of your original fiddle here with the necessary changes incorporated.
Currently, I am utilizing NextJS 14 with App router alongside Spring Boot on the backend. Within my application, I have both public and private routes set up. For the private routes, users are required to log in through a designated login page. Upon succes ...
I am encountering an issue with using index in a v-for loop to implement a function that deletes items from an array. The linter is flagging "index is defined but never used" as an error. I am following the instructions provided in a tutorial, but I am un ...
Develop a function that takes specific input and generates an array of objects with a length of 10 by incrementing the ID of each duplicate object. The first object in the output array should have "visible" set to true, while all others should have it set ...
I have two select inputs: <select id="inputA"> <option>1</option> <option>2</option> <option>3</option> </select> <select id="inputB"> <option>1</option> <option>2</opti ...
My website includes an ajax form: <form id="my_form"> <input type="text" id="field1" /> <input type="submit" value="submit" /> </form> I also have this JavaScript code: document.getElementById("my_form").onsubmit = fu ...
I need help figuring out how to eliminate the extra space above 'Smart Filter' in the div id='container_sidebar'. You can view an example of this issue on fiddle http://jsfiddle.net/XHPtc/ It seems that if I remove the float: right pro ...
I have a form with a select box. I want to populate the other text fields in the form based on the value selected from the options. Here is the form: <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/ ...
I'm currently working on creating a Search Bar feature. I would like the user to input text into the TextInput field, and when they press 'Enter', I want it to trigger my function. <TextInput //when the user presses Enter, call the functi ...
Trying to target all images using JavaScript, here is the code: HTML : <div class="container"> <img src="Coca.jpg" class="imgg"> <img src="Water.jpg" class="imgg"> <img src="Tree.jpg" class="imgg"> <img src="Alien.jpg" class=" ...
Being fairly new to Vue.js, I encountered an issue where I am unable to update or write data in my local JSON file. Let's assume that I have a data.json file https://i.sstatic.net/GZKh5.png and I want to add a new entry to it. I am currently using ...
As a novice web developer, I've taken on the challenge of creating a bug-tracking platform for my project. The main issue I'm facing is displaying the user's name instead of their user ID in the "Reported by" column on the dashboard screensh ...
In my PHP code, I have implemented a feature to remove certain items from a database. This functionality includes a search mechanism that hides the existing table and displays search results when a user performs a search. The issue I'm facing is relat ...
How can I modify the style of a single item in a list when a button is pressed in React-Native? I want only the pressed item to change, not the entire row. Here is my attempt at implementing this: //hooks const [activeStyle, setActiveStyle] = useState( ...
Can JavaScript prototype be used to add a method to a variable that is undefined? For instance, we can use the following code: var foo = "bar"; String.prototype.doTheFoo = function(){ console.log("foo is better than you"); }; foo.doTheFoo(); This c ...
Here is my code snippet: interface ICar { brand():string; brand(brand:string):void; } class Car implements ICar { private _brand: string; get brand():string { return this._brand; } set brand(brand:string) { this. ...
Having an issue where I have a button that I want to set time, and in order for the function to run correctly, it needs to be defined on the body element. This works fine with plain JavaScript, but I am encountering an error when trying to use jQuery. < ...
I am looking to create a web application that loads three different audio files, each one second long, in a specific order, and then merges them into a single Audio Buffer consecutively. To illustrate my goal, here is a sample code snippet: var AudioCo ...
I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...
I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...
I am currently facing an issue with using Ajax in a bootstrap PHP page. The problem is that I cannot use functions inside the onsubmit event because the button does not exist beforehand. Therefore, I have to resort to using delegate methods instead. Howeve ...