new Vue({ el: '#app', data: { arr: [{ name: 'afaw', }, { name: 'argeae', }, { name: 'agsesf', } ], loading: false, }, methods: { deleteFile(index) { this.loading = true; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.common.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div id="app"> <ul> <li v-for="(item,i) in arr"> <div class="p-2 overflow-hidden"> <small class="text-gray">{{item.name}} </small> <button class="btn btn-danger btn-sm mr-1 float-right" @click="deleteFile(i)"> <i v-if="loading" class="fa fa-spinner fa-spin fa-fw"></i> <i class="fa fa-trash-o"></i> </button> </div> </li> </ul> </div> When I click on the deleteFile button, I set this.loading = true; but it works for the entire list, how to make the loading only on a specific button?
this.arr[index].loading = true;- in each element of the array for this you need to keep a variable - Artem Gorlachev