解决:v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题

在使用vue进行前端开发时,可能会遇到循环渲染input输入框的需求,当使用v-for循环后,对v-model进行值的绑定时,可能会出现以下错误,如图所示:
v-model cannot be used on v-for or v-slot scope variables because they are not writable.
v-model cannot be used on v-for or v-slot scope variables because they are not writable.

错误代码:

 <template v-for="(item, index) in dataArray" :key="index">        
	<el-form-item>
		<el-input v-model="item" />
	</el-form-item>
	<el-form-item>
		<el-input v-model="item" />
	</el-form-item>
</template>

通过查阅文档发现,v-model 不可以直接修改 v-for 循环迭代时别名上的数据

解决方法:
我们可以使用对象的索引来进行v-model的值的绑定。

 <template v-for="(item, index) in dataArray" :key="index">        
	<el-form-item>
		<el-input v-model="dataArray[index]" />
	</el-form-item>
	<el-form-item>
		<el-input v-model="dataArray[index]" />
	</el-form-item>
</template>

通过以上的方法就可以完美解决了。

猜你喜欢

转载自blog.csdn.net/m54584mnkj/article/details/128207565