码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-11 23:52:09      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:get   动态添加   数据驱动   console   mode   efault   百度   使用   return   

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>

技术图片

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

标签:get   动态添加   数据驱动   console   mode   efault   百度   使用   return   

原文地址:https://www.cnblogs.com/IwishIcould/p/12466274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!