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">&nbsp; &nbsp; &nbsp; <img v-if="item.preview.length>1" :src="item.preview" width="160px" height="200px"/>&nbsp; &nbsp; &nbsp; <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 循环的索引。希望这可以帮助