Working with Vue.js: Binding to dynamically generated form elements

I am facing an issue where form elements are not available in the html document until an inline script runs on page load. In Vue.js, how can I bind to these form elements after the page loads? While with jQuery I could use a $('.element').each(), what is the preferred approach in Vue.js? Specifically, I need to set the value attribute of the hidden inputs.

<form>
    <input type="hidden" name="AST_Goals__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
    <input type="hidden" name="Perception_of_AppSec_program__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
</form>
javascriptruby-on-railsvue.jsturbolinksmarketo

Answer №1

In this scenario, interacting with the Document Object Model may not be necessary...

According to the Marketo documentation which provides an example of setting a hidden field's value, you can utilize form.vals() in the callback function of MktoForms2.loadForm():

MktoForms2.loadForm('//app-ab00.marketo.com', '785-UHP-775', 1057, form => { 
  form.vals({
    AST_Goals__c: 'my goal',
    Perception_of_AppSec_program__c: 'my perception'
  })
})

Answer №2

I discovered that the solution for my issue was to invoke the MktoForms2.loadForm() method in the JavaScript file, instead of placing it within the <script> tags in the HTML file. It seems that binding Vue elements is not possible when they are embedded within inline <script> tags.

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

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Whenever I click on a field and move to another one, the span tag turns red. Then, after pressing the submit button, an alert message pops up. However, if I turn the span red, fill in the field, and press the submit button, it shows success even if other f ...

javascripthtmlcss

Utilize Jade to showcase information within an input field

I'm still learning Jade and am trying to showcase some data as the value in a text input. For example: input(type="text", name="date", value="THISRIGHTHURR") However, I specifically want the value to be set to viewpost.date. I have attempted various ...

javascriptnode.jsexpresspug

Exploring the values of a JavaScript promise while iterating through a for loop

I find myself wandering in the land of possibilities and would greatly appreciate some direction. After spending 2-3 hours scouring through countless SO questions and documentation related to my current predicament, I still seem to be missing the mark. Ove ...

javascriptecmascript-6promisejavascript-objectses6-promise

Determine the worth of various object attributes and delete them from the list

Currently, my dataset is structured like this: { roof: 'black', door: 'white', windows: 8 }, { roof: 'red', door: 'green', windows: 2 }, { roof: 'black', door: 'green', windows: ...

javascriptnode.js

Utilizing HTML types in a custom hook with React and Typescript

Is it possible to pass type annotations like as SVGElement or as HTMLDivElement into a hook? function AppSVG(){ const ref = useResizeObserver((entry) => { ... }) as SVGElement;// <- How can the SVGElement be passed to the hook? r ...

javascriptreactjstypescript

The location.reload function keeps reloading repeatedly. It should only reload once when clicked

Is there a way to reload a specific div container without using ajax when the client requests it? I attempted to refresh the page with the following code: $('li.status-item a').click(function() { window.location.href=window.location.href; ...

javascriptjqueryajax

Removing an object from an array if it does not exist in another array: A step-by-step

Looking to remove an object from an array if it's not present in another array. After doing some research, I came across a similar question on this link, but with a different array source. Below is the example from the link: var check = [1, 2, 3]; ...

javascriptarrays

A basic problem involving appending content using jQuery

I have encountered a puzzling issue. Whenever I attempt to insert new content into the <div> element using my JS code, it briefly appears and then disappears abruptly. I am unsure of the reason behind this behavior. Is there a way to prevent this fr ...

javascriptjquery

Combining a variety of animations within a mesh

Can someone help me understand this specific example in Three.js? The link is . I am facing some difficulties with the BlendCharacter.js file. this.load = function ( url, onLoad ) { var scope = this; var loader = new THREE.JSONLoader(); load ...

javascript3dthree.jsblendermaya

Changing CSS classes with each click of the user, using Jquery

Looking for a way to seamlessly switch between two links with different CSS classes each time a user clicks? Here's what's currently happening: <a class="class1" id="class1">Class1</a> <a class="class2" id="class2">Class2</a ...

javascriptjqueryhtmlcss

Is it accurate that JavascriptResult displays javascript on the page in a string format?

I am new to .NET MVC and have been experimenting with different return types in MVC. However, I am having trouble getting the JavaScriptResult to work. In my controller, I have the following code: public ActionResult DoSomething() { string s = ...

javascriptasp.net-mvcrazor

JavaScript - Issue encountered while reaching the bottom of the webpage

While conducting tests using Firebug/Firefox, I am trying to execute a simple command that will scroll the page to the bottom. Here is the command: window.scrollBy(0,3000); Seems straightforward, right? When testing on certain websites like Yahoo.com ...

javascript

Tips for avoiding visual disturbance during page loading in AngularJS

I have developed a basic application using AngularJS. Upon loading the page, I briefly see the initial screen as shown below: However, once the page fully loads, the content is properly displayed and styled: How can I prevent the AngularJS code from flas ...

javascriptangularjszurb-foundationfouc

One way to send image data from the front end to the back end using AJAX

Client-Side JavaScript: var userInfo = { 'username': $('#addUser fieldset input#inputUserName').val(), 'email': $('#addUser fieldset input#inputUserEmail').val(), 'fullname': $('#addUser f ...

javascriptajaxnode.jsmongodbexpress

Reactjs encountering issues with CSS loading correctly

Currently, I am working with reactjs and utilizing the Nextjs framework. All my "css, js, images" are stored in the "public" folder and have been included in "_app.js". However, whenever I attempt to load the "Main page" in a browser, the page does not d ...

javascriptnode.jsreactjsnext.js

Different ways to showcase a value from the CSS file on the console using console.log

In this guide, you can learn how to create a custom directive in Angular by following this tutorial: Custom Directive Tutorial. The directive should function as intended. Still, I want to see the color value set in the CSS file displayed on the console us ...

javascriptnode.jsangulartypescript

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

javascripthtmliframe

The Next.js build process encountered an error when building due to an issue with plotly.js (The build failed with a ReferenceError: self is

Whenever I attempt to build the Next.js app for production using the yarn build command, I encounter the following error. Strangely enough, everything works perfectly fine on the development server when using the yarn dev command. The app employs the react ...

javascriptreactjsnext.jsbuild-errorplotly.js

What is causing this particular area to remain unaffected by the blur effect?

issue I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but ...

javascripthtmlcss