Vue.js 处理VueJS组件中输入文件中的事件

我有要更改图像的子组件的banch：

<template>
    <div>
        <div>
            <form enctype="multipart/form-data">
                <input type="file" name="file" id="file" @change="change_file" class="py-6 px-8 hidden">
                <label for="file" class="flex flex-col items-center text-main-color text-sm py-2 px-4">
                    <span class="text-sm mt-2" style="color: #7eaeb7;">Click to change image</span>
                    <img :src="'/img/'+data.img" alt="" class="w-48 h-48 mx-auto p-4" >
                </label>
            </form>
        </div>

        <div class="flex flex-col items-center">
            <span class="">{{data.definition}}</span>
            <span>{{data.description}}</span>

            <div @click="edit_statment">
                <span>Edit Statment</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['data'],

        methods: {
            change_image(event) {
                let formData = new FormData();
                formData.append('file', event.target.files[0]);

                axios.post('/change_image', formData, {
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(response => {
                        this.$emit('changeStatmentImg', response.data.new_image);
                    })
            },

            edit_statment() {
                this.$emit('editStatment');
            }
        }
    }
</script>

单击以更改图像
{{data.definition}}
{{data.description}
编辑状态
导出默认值{
道具：[“数据”]，
方法：{
更改图像（事件）{
设formData=new formData（）；
formData.append（'file'，event.target.files[0]）；
axios.post（'/change_image'，formData{
标题：{
“内容类型”：“多部分/表单数据”
}
})
。然后（响应=>{
这个.emit（'changestationimg'，response.data.new_image）；
})
},
编辑_station（）{
此.$emit（'editstation'）；
}
}
}

我正在侦听父组件上的事件：

<template>
<div class="">
    <statment v-for="item in statments" :key="item.id" :data="item" @editStatment="initialize(item, 'statment')" @changeStatmentImg="changeImage($event, item, 'statment')"></pr_course_statment>
</div>
</template>
<script>
    export default {
        data() {
            return {
                statments: [
                    {
                        img: 'module1.svg',
                        definition: 'First statment',
                        description: 'First statment description',
                    },
                    {
                        img: 'module2.svg',
                        definition: 'Second statment',
                        description: 'Second statment description',
                    },
                    {
                        img: 'module3.svg',
                        definition: 'Third statment',
                        description: 'Third statment description',
                    },
                ],
            }
        },

        methods: {
            initialize(item, model_name) {
                console.log('item.id: ', item.id);  
            },
            changeImage(file_name, item, model_name) {
                console.log(file_name);
                console.log(item.id); 
                console.log(model_name);
            },
        }
    }
</script>

导出默认值{
数据（）{
返回{
声明：[
{
img:'module1.svg'，
定义：“第一站”，
描述：“第一站描述”，
},
{
img:'module2.svg'，
定义：“第二站”，
描述：“第二站描述”，
},
{
img:'module3.svg'，
定义：“第三站”，
描述：“第三站描述”，
},
],
}
},
方法：{
初始化（项目、型号名称）{
console.log（'item.id:'，item.id）；
},
changeImage（文件名、项目、型号名）{
console.log（文件名）；
console.log（item.id）；
console.log（型号名称）；
},
}
}

当我从组件发出事件时，在对文本字段进行公共编辑的情况下（初始化方法），一切都进行得很顺利

但当子组件在“input file@change”上公开事件时，它每次只使用stations列表中的第一项

单击以更改图像
{{item.definition}}
编辑状态
var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
声明：[
{
id:1，
img:'module1.svg'，
定义：“第一站”，
描述：“第一站描述”，
},
{
id:2，
img:'module2.svg'，
定义：“第二站”，
描述：“第二站描述”，
},
{
id:3，
img:'module3.svg'，
定义：“第三站”，
描述：“第三站描述”，
},
],
}
},
方法：{
变更声明（项目）{
console.log（'item.id:'，item.id）；
},
更改图像（项目）{
log（'item.id from form input:'，item.id）；
},
}
})

我很确定，这是因为父组件中的

:key=“item.id”

未定义

：key

-属性对于vue的内部呈现和缓存非常重要，并且必须是全局唯一的（不仅仅是此组件的唯一属性）

我总是这样用：

\u uid

对于渲染的每个vue组件都会增加，因此它永远不会相同。

---

idx

需要区分此vue组件内的元素（它们都在同一个vue组件内，因此具有相同的uid）

这里有什么问题？问题是每次尝试更改组件3的图像时，它都会更改组件1的图像。不幸的是，结果是一样的。一段代码说明了问题的本质