VueJS嵌套表单中仅通过name属性获取AntiForgeryToken输入值问题

问题原因 #

1. getElementsByName是document全局对象的方法，单个DOM元素实例不支持该方法，所以直接用表单DOM调用会报错。
2. 如果你绑定ref的是自定义的表单组件而非原生<form>标签，this.$refs.xxx拿到的是Vue组件实例，不是原生DOM，需要先访问$el属性才能拿到对应的原生DOM节点。

解决方案 #

方案1：封装通用获取方法（推荐）

直接基于表单的ref名称查找对应token，无需索引定位，嵌套表单也不会互相干扰，querySelector会在当前表单的DOM范围内查找，只会返回当前表单内的防伪token：

// 可全局挂载也可写在当前组件内
function getCsrfToken(formRefName) {
  const ref = this.$refs[formRefName]
  // 兼容ref是组件实例/原生DOM两种情况
  const formDom = ref.$el ?? ref
  return formDom.querySelector('input[name="__RequestVerificationToken"]')?.value
}

// 调用示例
const parentFormToken = getCsrfToken.call(this, '父表单的ref名')
const childForm1Token = getCsrfToken.call(this, '子表单1的ref名')
const childForm2Token = getCsrfToken.call(this, '子表单2的ref名')
const childForm3Token = getCsrfToken.call(this, '子表单3的ref名')

方案2：挂载时统一归集所有token

如果表单都是固定渲染的，可在页面挂载完成后一次性把所有表单的token存入data，后续直接取用即可：

data() {
  return {
    csrfTokens: {}
  }
},
mounted() {
  // 按实际情况填写所有表单的ref名称即可
  const formRefList = ['parentForm', 'childForm1', 'childForm2', 'childForm3']
  formRefList.forEach(refName => {
    const ref = this.$refs[refName]
    const formDom = ref.$el ?? ref
    this.csrfTokens[refName] = formDom.querySelector('input[name="__RequestVerificationToken"]')?.value
  })
}

// 后续使用示例：直接取对应ref的token即可
// console.log(this.csrfTokens.parentForm)

如果子表单是动态渲染的，在子表单渲染完成的$nextTick回调中执行上述逻辑获取对应token即可。

内容的提问来源于stack exchange，提问作者Qiuzman