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的原因是，您在图像上设置的标签链接到为每个文件输入设置的ID slider-item-file-1。元素应该具有唯一的ID，在您的代码中您不必这样做，因此，当您单击标签时，该元素将始终访问该ID在体内的首次出现，因此，您的item_index始终为0。如果使ID为动态这将解决您的问题。

这也是为什么您会注意到，当您单击底部的图像时，它会跳到页面的顶部，因为它将转到具有该ID的第一个文件输入。

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

每个ID将包含每个for循环的索引。

希望这会有所帮助