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正常打印

               <div class="edit-form">
                    <div>
                        <input type="text" @blur="onLeast1()" ref="Least1">
                    </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数据的时候能正常打印出Input里的字符

Answer 1

有v-for的时候，this.$refs.Least1就变成了一个数组

ref的规则：

1. 写在原生dom元素上，this.$refs.xx得到的是dom节点
2. 写在组件上，this.$refs.xx得到的是这个组件的实例
3. 写在v-for中，无论是单层v-for还是多层嵌套的v-for，this.$refs.xx得到的是一个数组

可以这样改一下
你是要验证都不能为空吗?

onLeast1() {
    return this.$refs.Least1.every( item => item.value !== '' )
}

Answer 2

你v-for的时候把ref="Least1"这个写死了