0👍
✅
Solved
About my first issue :
I’ve fixed repeating image issue, by removing :file-list="fileList"
after that it each option get separate image
About second issue: (Thanks to Qonvex620 ideas)
I have changed my on-change
method to
:on-change="handleChange(b)"
Then added this to my data:
return {
index: '',
}
And finally my functions to:
handleOptionSuccess(res, file) {
this.optionChilds[this.index].photo = res.data;
},
handleChange(file, fileList) {
this.index = file;
},
Now each option of mine gets their stored image name.
Hope it help others as well
1👍
I think not the good way but will solve your problem as of now.
In your data put new variable like
data() {
return {
selected_index: ''
}
}
now in your button uploaded, set the value of it that match the current index like this
<el-button size="small" type="primary" @click="selected_index = b">Click to upload</el-button>
so now in your handler you could access it’s index like this
handleOptionSuccess(res, file) {
this.optionChilds[this.selected_index].photo = res.data; // this s supposed to set uploaded image name in options `photo: ''`
},
here how you access it inline with your index. Change handleOptionSuccess to this
:on-success="handleOptionSuccess($event, b)"
now in your function handleOptionSuccess you could do it like
handleOptionSuccess(res, index) {
this.optionChilds[index].photo = res.data; // this s supposed to set uploaded image name in options `photo: ''`
},
Source:stackexchange.com