Vue.js - 如何绑定到页面加载后生成的表单元素？

问题描述

在页面加载时运行内联脚本之前，html 文档中的表单元素不可用。如何在页面加载后绑定到 Vue.js 中的这些表单元素？显然使用 jQuery 我可以做一个 $('.element').each(), 但什么是“Vue 方式”？我需要设置隐藏输入的 value 属性。

<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>

解决方法

在这种情况下，您可能不需要访问 DOM...

基于 Marketo docs that show an example of setting a hidden field's value，您可以在 MktoForms2.loadForm() 的回调中使用 form.vals()：

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'
  })
})

,

我的答案是在 js 文件中调用 MktoForms2.loadForm() 函数，而不是在 html 文件中的 <script> 标签内。您不能在内联 <script> 标记内绑定 vue 元素。