Vue js Параметры @change всегда равны 0 при загрузке файла нажатием на картинку

Question

jsfiddle : https://jsfiddle.net/includephone/o9gpb1q8

У меня проблема с @change на входе. Я пытаюсь сделать слайдер изображений, на каждом слайде должно быть 4 изображения.

Данные

 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: {
        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}`);
        }
}

Шаблон

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

В чем может быть проблема, что параметры передаются неправильно и как это можно исправить? При загрузке изображения в методе onImageChange параметры index и item_index всегда равны 0

Answer 1

Причина, по которой item_index всегда равен 0, заключается в том, что метка, установленная на изображении, связана с идентификатором slider-item-file-1, который был установлен для каждого входного файла. Элемент должен иметь уникальный идентификатор, в вашем коде вы этого не сделаете, поэтому, когда вы щелкаете метку, он всегда будет получать доступ к первому вхождению этого идентификатора в теле, следовательно, вы всегда получите item_index, равный 0. Если вы сделали динамический идентификатор c это решит вашу проблему.

По этой же причине вы заметите, что, когда вы нажимаете на нижнее изображение, оно переходит вверх страницы, потому что оно идет к первому входному файлу с этим идентификатором.

<label :for="'slider-item-file-' + parent_index + '-' + index + '-' + item_index">
      <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-' + parent_index + '-' + index + '-' + item_index"/>

Каждый идентификатор будет содержать индекс каждого для l oop.

Надеюсь, это поможет