The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database.

However, when I trigger this form, an error occurs.
See example of the error

<input id="merchantCode" type="text" name="merchantCode"   @ionInput="merchantPaymentInfo.merchantCode = $event.target.value;" v-model="merchantPaymentInfo.merchantCode" />
<input id="merchantKey" type="text" name="merchantKey"  @ionInput="merchantPaymentInfo.merchantKey = $event.target.value;" @ionChange="merchantPaymentInfo.merchantKey = $event.target.value;" v-model="merchantPaymentInfo.merchantKey" />
<input id="orderRef" type="text" name="orderRef"  @ionInput="merchantPaymentInfo.orderRef = $event.target.value;" @ionChange="merchantPaymentInfo.orderRef = $event.target.value;" v-model="merchantPaymentInfo.orderRef" />
<input id="amount" type="text" name="amount"  @ionInput="merchantPaymentInfo.amount = $event.target.value;" @ionChange="merchantPaymentInfo.amount = $event.target.value;" v-model="merchantPaymentInfo.amount" />
<input id="refNo" type="text" name="refNo"  @ionInput="merchantPaymentInfo.refNo = $event.target.value;" @ionChange="merchantPaymentInfo.refNo = $event.target.value;" v-model="merchantPaymentInfo.refNo" />
<input id="currCode" type="text" name="currCode"   @ionInput="merchantPaymentInfo.currCode = $event.target.value;" @ionChange="merchantPaymentInfo.currCode = $event.target.value;" v-model="merchantPaymentInfo.currCode" />
<input id="installmentPeriod" type="text" name="installmentPeriod"  @ionInput="merchantPaymentInfo.installmentPeriod = $event.target.value;" @ionChange="merchantPaymentInfo.installmentPeriod = $event.target.value;" v-model="merchantPaymentInfo.installmentPeriod" />
// In Typescript vuejs
async cartMergeRepurchase(data:object){
      const res =  await CartService.repurchase(data).then(function (response) {
                  return response;
              }) 
              //console.log(res);
              let returnData = null;

              if(res.data.success)
              {
                  returnData = res.data.returnData;

                  this.$data.merchantPaymentInfo.merchantUrl = returnData.merchantUrl;
                  this.$data.merchantPaymentInfo.merchantCode = returnData.merchantCode;
                  this.$data.merchantPaymentInfo.merchantKey = returnData.merchantKey;
                  this.$data.merchantPaymentInfo.orderRef = returnData.orderRef;
                  this.$data.merchantPaymentInfo.amount = returnData.amount;
                  this.$data.merchantPaymentInfo.refNo = returnData.refNo;
                  this.$data.merchantPaymentInfo.currCode = returnData.currCode;
                  this.$data.merchantPaymentInfo.installmentPeriod = returnData.installmentPeriod;
                  
                  this.$el.querySelector("#merchantCode").value = this.$data.merchantPaymentInfo.merchantCode;
                  this.$el.querySelector("#merchantKey").value = this.$data.merchantPaymentInfo.merchantKey;
                  this.$el.querySelector("#orderRef").value = this.$data.merchantPaymentInfo.orderRef;
                  this.$el.querySelector("#amount").value = this.$data.merchantPaymentInfo.amount;
                  this.$el.querySelector("#refNo").value = this.$data.merchantPaymentInfo.refNo;
                  this.$el.querySelector("#currCode").value = this.$data.merchantPaymentInfo.currCode;
                  this.$el.querySelector("#installmentPeriod").value = this.$data.merchantPaymentInfo.installmentPeriod;
                  this.$el.querySelector("#ffForm").action = this.$data.merchantPaymentInfo.merchantUrl;

              }

              //
              alert(JSON.stringify(returnData));
              (this.$refs['ffForm'] as any).submit();

},

(this.$refs['ffForm'] as any).submit();

Answer №1

After removing the code I believed was causing issues, I discovered that the functionality remained intact when checking with console.log(this.$el).

this.$el

source of issue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which Angular Lifecycle event should I utilize to trigger a specific action when either two buttons are pressed or when one of the buttons undergoes a change?

In this scenario, we have a total of 6 buttons split into two groups of 3: one on the top and the other on the bottom. let valuesum; let value1; let value2; let ButtonGroup1clicked= false; let buttonGroup2Clicked= false; function click1 (value){ va ...

How can we ensure only one click event is executed per element type in jQuery?

Here's the issue: I have a list of items with their own content organized in lists. Using jQuery, I've set it up so that when you click on an item, the list expands to show its content. However, when clicking on another item, the previously click ...

Exploring the versatility of combining CSS classes with MUI 5 SX prop

Is there a way to use multiple CSS classes with the MUI 5 SX prop? I've defined a base class for my Box components and now I want to add a second class specifically for styling the text inside the Box. When I try to apply both classes like sx={styles. ...

Is there a way to efficiently process multipart/formdata, application/json, and text/plain within a single Express handler?

Operating an express demo server that mirrors the client's POST requests back to it is a part of an educational practice. In this exercise, the client makes a POST request using the fetch API, like so: fetch('http://localhost:5000/', { m ...

Having trouble with the `npm start` command while working with react.js?

Currently, I am in the process of setting up React.js. To achieve this, I executed npm install -g create-react-app followed by create-react-app my-app. Afterward, I proceeded to run the npm start command but encountered the error displayed below. https:// ...

The tooltips in the WordPress-Gulp-Starter-Kit running on Bootstrap 5 do not seem to be functioning properly

I'm having trouble with tooltips not working properly. The codebase I'm using is from this repository https://github.com/oguilleux/webpack-gulp-wordpress-starter-theme If you need more details, feel free to reach out. Here is my main.js file: ...

Exporting all components using require: A complete guide

Currently, I am working on a Vue js application where I am tasked with exporting all the files and components from a specific directory. These files/components need to be imported into a separate file named paths.js. If I use the require function to impor ...

In what way can a property in JavaScript alter an object?

I am a newcomer to node.js, although I have been writing Javascript for many years. Recently, I encountered an interesting pattern that has left me puzzled: a Flag that is used to set a modifier on the object. For example, in the socket.io documentation: ...

The debate between using backticks and colons in TypeORM queries

Lately, I've been crafting queries utilizing backticks const firstUser = await connection .getRepository(User) .createQueryBuilder("user") .where(`user.id = '${id}'`) .getOne(); However, in the typeorm documentatio ...

In Javascript, you can quickly update other variables with just a one-line conditional statement

Is there a way to simplify this code into one line without using an if-else statement? For example, updating all variables when a specific condition is met? const dogStatus = present ? "bark" : "beep"; const catStatus = present ? "meow" : "meep"; const f ...

Angular class requires multiple class members and validators for MatSelection List to be bound with Formbuilder

Could you please guide me on how to connect the Google Angular Materials mat-selection-list with the FormBuilder? We have the following class and are attempting to utilize Reactive Form Builder for this purpose. While we are aware of how to link data class ...

extracting key-value pairs from nested arrays in javascript objects

As a beginner in javascript, I am facing an issue that may seem basic to others. Here is the json data I am working with: { "statusCode": 200, "status": "success", "data": [ [ { "city": "Alexandria", ...

Graph columns failing to display on Chart.js bar chart

I'm currently facing a challenge while trying to create a bar chart using HTML and JavaScript. Unfortunately, the bars are not showing up for some reason. I have included the code snippet below along with an imagehttps://i.stack.imgur.com/4H7ol.png. ...

Steps for importing a CommonJS module that exports as a callable into TypeScript

I am dealing with a project that has a mixture of JavaScript and TypeScript files. Within the project, there is a JS library that follows this structure: module.exports = () => { // logic dependent on environment variables // then... return { ...

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

What is preventing me from retrieving these JSON values?

One of the functionalities on my website involves making an AJAX call to retrieve a member's profile information for editing purposes. The code snippet responsible for this operation is shown below: function loadProfileData() { var ...

The Google map is failing to load on the webpage

My id="ieatmaps" is set up to call the googlemaps.js, but for some reason, it's not displaying correctly. I must be missing something. function initMap() { var map = new google.maps.Map(document.getElementById('ieatmaps'), { c ...

What is preventing me from being able to effectively transmit the array using the POST method in Express?

As a newcomer trying to learn Express, I believe I am on the right path, but I am currently facing some challenges with the POST method. The issue I'm encountering is as follows: Whenever I send a POST request to an HTTP file, I receive an empty ob ...

Implementing conditional navigation in app.vue based on the user's login status retrieved from the main.js file

I need to display a different navigation in app.vue based on whether the user is signed in or not. I have seen some complex solutions, but I'm wondering if there is a simple if/else solution or a way to pass a function from main.js to vue.js? Thank yo ...

"Having trouble with my Ajax Post - seeking an easy solution

I am having trouble with a simple Ajax post request. Here is my code snippet: <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var deviceDetails = []; ...