vue v-for循环渲染动态ref表单校验的实现技巧

简介: vue v-for循环渲染动态ref表单校验的实现技巧

v-for循环渲染动态ref

<div v-for="(item, index) in fundList" :key="index">
  <el-form
    :ref="'RefForm' + index"
    :model="formData"
    label-width="100px"
    size="mini"
  >
  </el-form>
</div>

要点

:ref="'RefForm' + index"

动态ref表单校验

    buy(index) {
      eval("this.$refs.RefForm" + index)[0].validate((valid) => {
        if (valid) {
          //表单校验通过执行的代码
        }
      });
    },

要点

eval("this.$refs.RefForm" + index)[0]

eval("this.$refs.RefForm" + index) 会得到页面中,ref相同的元素数组,第0个即需要的目标表单。

目录
相关文章
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
1天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
9 1
|
2天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
12 1
|
2天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
8 1
|
1天前
|
JavaScript 前端开发 程序员
Vue组件化、单文件组件以及使用vue-cli(脚手架)
Vue组件化、单文件组件以及使用vue-cli(脚手架)
11 0
|
1天前
|
JavaScript API
Vue数据动态代理机制的实现以及响应式与数据劫持
Vue数据动态代理机制的实现以及响应式与数据劫持
6 0
|
1天前
|
JavaScript 前端开发 程序员
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
7 0
|
1天前
|
JavaScript
vue中v-bind和v-model有什么区别?
在Vue.js中,v-bind和v-model都是指令,用于实现数据和DOM元素之间的双向绑定,但它们的使用场景和功能有所区别。
6 0
|
2天前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取