我正在创建一个应用程序,用户可以在其中以动态形式添加多个车辆信息。
我可以获取除image以外的row数组中的所有车辆信息。当用户以一种形式上传图像时,我想在rowname的regname上添加Image Name。我可以在vuejs中上传图片,但是不了解如何以动态形式上传图片。如何将图片信息明智地推入数组索引
<template>
<div>
<div v-for="(row,index) in rows" :key="index">
<input v-model="row.type" type="text">
<input v-model="row.model" type="text">
<input class="file-input" type="file" v-on:change="onPhotoChnage">
<button @click="deleteRow(index)"></button>
</div>
<button @click="addRow">Add vehicle</button>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
rows: [{
'type': '',
'model': '',
'regname': '',
'reg': '',
}],
methods: {
addRow: function() {
this.rows.push({ 'type': 'Sedan Car', 'model': '' });
},
deleteRow(row) {
this.rows.splice(row, 1);
},
onRegChnage(e) {
let file = e.target.files[0];
this.rows[2]=file.name
let reader = new FileReader();
reader.onload = (file) => {
this.rows[3]= reader.result;
reader.readAsDataURL(file);
},
}
}
}
}
</script>