Solution: v-model cannot be used on v-for or v-slot scope variables because they are not writable. Error reporting problem

When using vue for front-end development, you may encounter the need to render input boxes in a loop. When using v-for loop to bind values ​​to v-model, the following error may occur, as shown in the figure:

v-model cannot be used on v-for or v-slot scope variables because they are not writable.

error code:

 <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>

By consulting the documentation, I found that v-model cannot directly modify the data on the alias during v-for loop iteration.

Solution:
We can use the index of the object to bind the value of 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>

The above method can be perfectly solved.