Как сделать видимым дочерний элемент при клике?

Question

[demeys]

Привет! вывожу массив фалов

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>

При клике на кнопку deleteFile задаю this.loading = true;

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

но он срабатывает для всего списка, как сделать чтоб loading был только у конкретной записи?

Answer 1

[nvdfxx]

<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

[demeys]

Спасибо за ответ!
я добрался до элемента button

<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>

но свойство loading должно меняться у дочернего элемента

Comments

[Дима]

привет. неплохо бы такие вопросы с кодом оформлять в вебпесочницах. JsFiddle, codesandbox, repl.it, runkit

[demeys]

Привет!
вот выложил на JsFiddle
https://jsfiddle.net/demeys/eywraw8t/462223/
при клике на удаление нужно чтобы loader был только у кнопки на которую нажали