vue:v-for 创建出来多个input获得它们的值

在Vue中使用v-for创建多个input

<div id='test'>
	<input type='text' v-for="i in nums" :key=i>
</div>

data(){
	return{
		nums:[1,2,3,4,5]
	}
}

常规思路就是用document.getElementById(‘test’)获取到id为test的div，然后通过这个父div得到子input组件以及其中的值。
Vue实现了ref属性，通过调用this.$refs可以得到当前对象的所有相同ref属性的组件
我们可以通过这个属性获取创造出来的input

<div id='test'>
	<input type='text' v-for="i in nums" :key=i  ref='test'>
</div>

data(){
	return{
		nums:[1,2,3,4,5]
	}
}

methods:{
	show(){
		//得到v-for生成的五个input组件
		console.log(this.$refs.test);
		//得到第一个input
		console.log(this.$refs.test[0]);
		//获得所有input的value值
		for(let i=0;i<this.nums.length;i++){
			console.log(this.$refs.test[i].value);	
		}
	}
}

还有一种方式是通过v-model来绑定所有input值

<div id='test'>
	<input type='text' v-for="(item,index) in nums" :key=i v-model='item.model' :key=item.id>
</div>

data(){
	return{
		nums:[
			{id:1,model:''},
			{id:2,model:''},
			{id:3,model:''},
			{id:4,model:''},
			{id:5,model:''},
		]
	}
}

methods:{
	show(){
		//获得所有input的值
		for(let i=0;i<this.nums.length;i++){
			console.log(this.nums[i].model);
		}
	}
}