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

The external IP address cannot be accessed beyond the function scope in Node.js

Recently joining this community, I am in the process of retrieving my external IP through a package called "external-ip." The example code provided by them looks like this: const getIP = require('external-ip')(); getIP((err, ip) => { ...

Is it possible to capture and generate an AxiosPromise inside a function?

I am looking to make a change in a function that currently returns an AxiosPromise. Here is the existing code: example(){ return api.get(url); } The api.get call returns an object of type AxiosPromise<any>. I would like to modify this function so ...

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

Error message: "Unidentified variable in the code snippet from MUIv5 sample."

Achieving the Objective To implement a drawer sidebar in MUI5 that can be toggled open and closed by the user, I am exploring the documentation for the Drawer component as well as referencing an example. Encountering an Issue Upon copying the code from ...

When you try to upload an image using php/ajax, it causes the page to refresh

I'm currently experiencing an issue with my script. I am successfully using formData() to upload an image via Ajax, which is being saved to the designated folder. However, I am puzzled as to why my page keeps refreshing after move_uploaded_file() is e ...

Is your JavaScript function failing to execute properly?

Within my script, I have defined two JavaScript functions: myFunction() and submitForm(). <script> var intervalID = 0; function myFunction(interval) { if(interval == 1) { if(intervalID != 0) { window.clearInterval(intervalID); in ...

Showing no background color until the user lifts their finger

I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...

Injecting Language in Webstorm: Converting scss to HTML

Query: How can I configure WebStorm to recognize scss within html Scenario: I currently have a project built using vue.js I've linked .vue files with the html language (.vue == .html). In general, *.vue files follow this structure: <template&g ...

Strange behavior observed with Nuxt Js asyncData method returning values

Currently, I am engaged in a project using nuxt js/vue js. The project requires me to interact with multiple REST APIs. To accomplish this task, I am utilizing the asyncData() function provided by nuxt js to make the API calls within the page component. i ...

Angular 4's OrderBy Directive for Sorting Results

I've been working on implementing a sorting pipe based on the code provided in this resource: The issue I'm facing revolves around handling undefined values within my data. The sorting pipe functions correctly when there are no undefined values ...

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

I need assistance with passing a JavaScript variable to the NAME attribute of an HTML tag. Let's consider this script example: <script> var name = "Click here!"; </script> My goal is to pass the variable to some code in order for <a ...

Cutting out the lowest identification that is not a certain object

A real-time counter showing the viewers of a news article on a website using Laravel Jetstream. .leaving(user => { this.participants.splice( this.participants.indexOf(user, 1)); }) .joining(user => { this.participants.push(user); ...

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

Can React components be saved in an array?

I am currently working on enhancing the code snippet provided below. This code is intended to iterate through elements of an array using keys to locate images within a lengthy SVG file directly embedded in the document under the identifier "SomelongUglySVG ...

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

Ways to implement collapsible functionality into table rows

I have a table on my website and I want to initially display only 3 rows. When the user clicks on the 'more' button, I want the rest of the rows to be displayed. However, when I tried implementing this with code, I encountered rendering issues. I ...

Issue with package: Unable to locate the module specified as './artifacts/index.win32-ia32-msvc.node'

I am encountering an issue while using Parcel for the first time. When I execute npx parcel .\app\index.html, I receive the following error: Error: Module not found './artifacts/index.win32-ia32-msvc.node' Require stack: - C:\Users ...

What are some ways in Vue.js to send information to child components aside from using props?

When working with parent and child components in vue.js, the preferred method to pass data is by using props from the parent to the child and emitting events from the child to the parent. However, what if you find yourself needing to access a child compone ...

Issue with interface result: does not match type

Hey there! I've been working on creating an interface in TypeScript to achieve the desired return as shown below: { "field": "departament_name", "errors": [ "constraint": "O nome do departam ...