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:''                            }                        ]                    ],                }            ]        }    },参数未正确传递可能是什么问题，如何解决？加载图片时，onImageChange方法中，index和item_index参数始终为0

Answer 1

item_index 始终为 0 的原因是因为您在图像上设置的标签链接到slider-item-file-1为每个文件输入设置的 id。一个元素应该有一个唯一的 id，在你的代码中你没有，所以当你点击标签时，它总是会访问该 id 在正文中的第一次出现，因此你总是会得到一个 0 的 item_index。如果你使 ids 动态这将解决您的问题。

这也是为什么您会注意到，当您单击底部图像时，它会跳到页面顶部，因为它会转到具有该 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 循环的索引。

希望这可以帮助