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

Posted 2021-03-06 iwishicould

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>