vue为什么v-for的数据在input里打印不出来？

Question

现在遇到一个问题，我在表单里写了一些验证事件，在没有v-for插入数据的时候还能验证，但是v-for插入数据后，无论表单有没有字符打印的都是undefined，那就意味着我写的验证都无效了，求解？

有v-for的时候打印undefined

                   <div class="edit-form" v-for="(item,index) in listData" :key="index">

                    <div>

                        <input type="text"  @blur="onLeast1()" ref="Least1" v-model="item.name" >

                        </div>

                    </div> 

                     

          onLeast1() {

            if (this.$refs.Least1.value !== '') {

                console.log(this.$refs.Least1.value)

                return false;

            } else {

                console.log(this.$refs.Least1.value)

                return false;

            }

        }//有v-for数据的时候就是undefined

没有v-for正常打印

Answer 1

有v-for的时候，this.$refs.Least1就变成了一个数组ref的规则：写在原生dom元素上，this.$refs.xx得到的是dom节点写在组件上，this.$refs.xx得到的是这个组件的实例写在v-for中，无论是单层v-for还是多层嵌套的v-for，this.$refs.xx得到的是一个数组可以这样改一下你是要验证都不能为空吗?onLeast1() {&nbsp; &nbsp; return this.$refs.Least1.every( item => item.value !== '' )}