v-for动态添加表单,并且获取表单中的值

简介: v-for动态添加表单,并且获取表单中的值

vue是数据驱动视图,所以要想改变页面的结构,就要首先改变数据。


要想动态添加一个input表单,每当你点击的时候,添加一个数据在数组里面。


handler(mess){
    this.list.push("jo")
 },


要想获得当前这个表单里面的值,我当初想的是v-model,去绑定。发现不可以。这就尴尬了。


整了一会,在百度上查找了一些资料。


还是没有对应的案例。可能是我百度的方法是不正确。


最后,还是决定使用原生的js


给表单绑定一个id。在失去焦点的时候,得到这个input框中的值。


let aa=document.getElementById("demo"+mess).value;


<template>
    <div>
     <div v-for="(item,index) in list" :key="index" class="demo">
         <input type="text" :id="`demo${index}`">
         <button @click="handler(index)" @blur="getterValue(index)">添加</button>
     </div>
    </div>
</template>
<script>
    export default {
        data(){
          return{
            list:["12"]
          }
        },
        methods:{
            handler(mess){
                this.list.push("jo")
            },
            getterValue(mess){
                let aa=document.getElementById("demo"+mess).value;
                console.log("得到的值是", aa)
            }
        }
    }
</script>
相关文章
|
3月前
表单的构成与创建
表单的构成与创建。
21 2
|
6月前
|
Python
表单字段
【6月更文挑战第13天】表单字段。
49 4
|
5月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
196 0
|
7月前
|
存储 前端开发 JavaScript
处理子表单数据
处理子表单数据
51 2
element表单组件的trigger表单验证逻辑规则
校验元素trigger属性值应该怎么选择?
368 0
element表单嵌套检验+动态添加
element表单嵌套检验+动态添加
329 0
|
容器
2、表格和表单元素
2、表格和表单元素
103 0
2、表格和表单元素
|
JavaScript
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
使用Element输入框自带change事件获取到scope.$index以及input框中的值(@change="change(scope,$event)"); 使用forEach遍历整个表单的数据(item是需要遍历的数组,index是数组中元素的下标);
492 0
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
|
数据安全/隐私保护
表单选择器
表单选择器
111 0