Skip to content

Vue.js – How to bind to form elements generated after page load?

I have form elements aren’t available in the html document until an inline script runs on page load. How to I bind to these form elements in Vue.js after the page loads? Obviously with jQuery I could do a $('.element').each(), but what is the ‘Vue way’? I need to set the valueattribute 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>

Answer

The answer for me was to call the MktoForms2.loadForm() function in the js file, not within <script> tags in the html file. You can’t bind vue elements within inline <script> tags.