Check out my JSFiddle here:: https://jsfiddle.net/includephone/o9gpb1q8
I've encountered an issue involving the @change event on an input field. My goal is to create a carousel of images with 4 images per slide.
Data Object Structure
data: function () {
return {
page: [
{
type: 'text',
name: 'title-brand',
text: '',
image: '',
preview: ''
},
{
name:'slider',
type:'file',
slide:[
[
{
model_name:'',
inst:'',
item_name:'',
item_link:'',
image:'',
preview:''
},
{
model_name:'',
inst:'',
item_name:'',
item_link:'',
image:'',
preview:''
},
{
model_name:'',
inst:'',
item_name:'',
item_link:'',
image:'',
preview:''
},
{
model_name:'',
inst:'',
item_name:'',
item_link:'',
image:'',
preview:''
}
]
],
}
]
}
},
Methods I'm Using
methods: {
onImageChange(e, parent_index, index, item_index){
let files = e.target.files || e.dataTransfer.files;
let vm = this.page[parent_index];
console.log(`${index}, ${item_index}`);
let reader = new FileReader();
reader.onload = (e)=> {
Vue.set(vm.slide[index][item_index], 'image', e.target.result);
}
Vue.set(vm.slide[index][item_index], 'preview', URL.createObjectURL(files[0]));
reader.readAsDataURL(files[0])
},
stat(par1, par2){
console.log(`pat1: ${par1}, par2: ${par2}`);
}
}
Template for Data Display
<div v-for="(component, parent_index) in page" v-bind:key="parent_index" class="container-constructor">
<div v-if="component.name==='slider'" class="data-block slider">
<div class="body-block">
<div v-for="(slide, index) in component.slide" v-bind:key="index">
<div v-for="(item, item_index) in slide" v-bind:key="item_index" class="slider-item">
<button type="button" @click="stat(index, item_index)">Click {{index}} {{item_index}}</button>
<label for="slider-item-file-1">
<img v-if="item.preview.length>1" :src="item.preview" width="160px" height="200px"/>
<img v-else src="images/image6.png" width="160px" height="200px"/>
</label>
<input type="file" @change="onImageChange($event, parent_index, index, item_index)" id="slider-item-file-1"/>
<div class="slider-item-info">
<input type="text" v-model="item.model_name" name="model-name" placeholder="model name"/>
<input type="text" v-model="item.inst" name="instagram-model" placeholder="model inst"/>
<div class="item-name">
<input type="text" v-model="item.item_name" name="item-name" placeholder="item name"/>
<input type="text" v-model="item.inst" name="item-link" placeholder="item link"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Has anyone experienced issues with passing parameters correctly, as mine always seem to be 0 when loading? Any insights on how to resolve this?