How to make a child element visible on click?

Question

Vue.js

Hey! I output an array of files
https://jsfiddle.net/demeys/eywraw8t/462223/

<ul class="list-inline">
            <li class="list-inline-item image-list shadow mb-3 ml-3" v-for="file, index in files">
                <a :href="file.src">
                    <v-lazy-image class="img-fluid" :src="file.src" />
                </a>
                <div class="p-2 overflow-hidden">
                    <small class="text-gray">{{ file.file_name}}</small>
                    <button   @click="deleteFile(index, file)"  class="btn btn-danger btn-sm mr-1 float-right">
                        <i v-if="loading" class="fa fa-spinner fa-spin fa-fw"></i>
                        <i class="fa fa-trash-o" aria-hidden="true"></i> Delete
                    </button>
                </div>

            </li>
        </ul>

When clicking on the deleteFile button, I set this.loading = true;

methods: {
  deleteFile(file) {
     this.loading = true;
}

but it works for the entire list, how can I make it so that only a specific entry has loading?

Answer 1

<div id="app">
  <ul>
    <li v-for="(item,i) in arr">{{item.name}} <button @click="someEvent(i)">delete</button></li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    arr: [
      {
        name: 'afaw',
        loading: false
      },
      {
        name: 'argeae',
        loading: false
      },
      {
        name: 'agsesf',
        loading: false
      }
    ]
  },
  methods: {
    someEvent(index) {
      this.arr[index].loading = true
    }
  }
});

Answer 2

Thanks for the answer!
i got to the button element

<button @click="deleteFile(index)"  class="btn btn-danger btn-sm mr-1 float-right">
                        <i v-if="loading"  class="fa fa-spinner fa-spin fa-fw"></i>
                        <i class="fa fa-trash-o" aria-hidden="true"></i>
                    </button>

but the loading property must change on the child element