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>
相关文章
|
9月前
表单标签
表单标签
33 0
|
11月前
element表单嵌套检验+动态添加
element表单嵌套检验+动态添加
198 0
|
容器
2、表格和表单元素
2、表格和表单元素
81 0
2、表格和表单元素
|
移动开发 前端开发 HTML5
前端表单部分新属性
前端表单部分新属性
73 0
|
JavaScript
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
使用Element输入框自带change事件获取到scope.$index以及input框中的值(@change="change(scope,$event)"); 使用forEach遍历整个表单的数据(item是需要遍历的数组,index是数组中元素的下标);
434 0
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
|
前端开发 算法 JavaScript
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
阅读使人充实,会谈使人敏捷,写作使人精确。 ——培根
124 0
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
|
存储 JavaScript 前端开发
通过表单隐藏域向后台传值
通过表单隐藏域向后台传值
600 0
通过表单隐藏域向后台传值
|
JavaScript 前端开发 数据格式