title: Handling event from input file in VueJS component
body: <p>I have the banch of child component in which I want to change image:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;form enctype=&quot;multipart/form-data&quot;&gt;
                  &lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot; @change=&quot;change_file&quot; class=&quot;py-6 px-8 hidden&quot;&gt;
                  &lt;label for=&quot;file&quot; class=&quot;flex flex-col items-center text-main-color text-sm py-2 px-4&quot;&gt;
                      &lt;span class=&quot;text-sm mt-2&quot; style=&quot;color: #7eaeb7;&quot;&gt;Click to change image&lt;/span&gt;
                      &lt;img :src=&quot;'/img/'+data.img&quot; alt=&quot;&quot; class=&quot;w-48 h-48 mx-auto p-4&quot; &gt;
                  &lt;/label&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;flex flex-col items-center&quot;&gt;
              &lt;span class=&quot;&quot;&gt;{{data.definition}}&lt;/span&gt;
              &lt;span&gt;{{data.description}}&lt;/span&gt;
  
              &lt;div @click=&quot;edit_statment&quot;&gt;
                  &lt;span&gt;Edit Statment&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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 =&gt; {
                          this.$emit('changeStatmentImg', response.data.new_image);
                      })
              },
  
              edit_statment() {
                  this.$emit('editStatment');
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>I listenning for events on parent component:</p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;&quot;&gt;
      &lt;statment v-for=&quot;item in statments&quot; :key=&quot;item.id&quot; :data=&quot;item&quot; @editStatment=&quot;initialize(item, 'statment')&quot; @changeStatmentImg=&quot;changeImage($event, item, 'statment')&quot;&gt;&lt;/pr_course_statment&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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);
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>When I emit event from component everething goes well in case of common editing of text field 's  (initialize method)</p>
  <p>But when child component expose event on &quot;input file @change&quot; it use only the first item from Statments list every time</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"&gt;
  
  &lt;div id="app" class="flex justify-between"&gt;
        &lt;div v-for="item in statments"&gt;
                  &lt;div class="flex flex-col items-center"&gt;
                      &lt;div class="flex flex-col items-center border border-indigo-200 rounded-md"&gt;
                          &lt;form class="flex justify-center my-4" enctype="multipart/form-data"&gt;
  
                              &lt;input type="file" name="file" id="file" @change="changeImage(item)" class="py-6 px-8 hidden"&gt;
                              &lt;label for="file" class="flex flex-col items-center text-main-color text-sm py-2 px-4"&gt;
                                  &lt;span class="text-sm mt-2" style="color: #7eaeb7;"&gt;Click to change image&lt;/span&gt;
                                  &lt;img :src="item.img" alt="" class="w-48 h-48 mx-auto p-4" &gt;
  
                              &lt;/label&gt;
                          &lt;/form&gt;
  
                      &lt;/div&gt;
  
                      &lt;div class="mt-4 mb-6" @click="changeStatment(item)" class="flex flex-col items-center"&gt;
                          &lt;span&gt;{{item.definition}}&lt;/span&gt;
                          &lt;span class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0 main-color"&gt;Edit Statment
                              &lt;svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"&gt;
                                  &lt;path d="M5 12h14"&gt;&lt;/path&gt;
                                  &lt;path d="M12 5l7 7-7 7"&gt;&lt;/path&gt;
                              &lt;/svg&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var app = new Vue({
    el: '#app',
          data() {
              return {
                  statments: [
                      {
                          id: 1,
                          img: 'module1.svg',
                          definition: 'First statment',
                          description: 'First statment description',
                      },
                      {
                          id: 2,
                          img: 'module2.svg',
                          definition: 'Second statment',
                          description: 'Second statment description',
                      },
                      {
                          id: 3,
                          img: 'module3.svg',
                          definition: 'Third statment',
                          description: 'Third statment description',
                      },
                  ],
              }
          },
          methods: {
              changeStatment(item) {
                  console.log('item.id: ', item.id);  
              },
              changeImage(item) {
                  console.log('item.id from form input: ', item.id);
              },
          }
  })
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>