Как добавить лоадер к каждому элементу, когда происходит действие?

Question

[asd dsa]

Есть такая проблема, существует общий компонент в котором, я получаю объект с данными и провожу операции (редактирования, удаления, сохранения), в момент когда когда объект редактируется, я показываю лоадер, когда сохраняю, то прячу его. Состояние лоадера, я записываю в булево значение isLoading в модель где формируется объект:

createTile(e){
            const { x, y, tileType } = e
            const template = this.getTileByType(tileType)
            // NOTE - id should be unique enough to avoid
            //   collisions with other tiles in this view
            const id = `temp-${Math.floor(Math.random() * Math.floor(8675309))}`
            const tile = {
                id,
                name: template.label,
                tileType,
                renderConfig: { ...template.defaultConfig },
                // TODO - serialize query and params here (for future backend use)
                queryJSON: [],
                isLoading: false  //  LOADER VALUE
            }
            const layout = {
                tileId: id,
                x,
                y,
                w: 1,
                h: 1,
                isNew: true,
            }
            this.$set(this.localValue, id, {
                tile,
                layout,
            })
            this.editTileIsNew = true
            this.onTileEdit(id)
        },

Состояние лоадера, я меняю в методах сохранения і редактирования:

onTileEdit(id){
            const { tile } = this.localValue[id]
            this.editableTile = tile
            this.editableTile.isLoading = true // new Loder value
            this.editableTileTemplate = this.getTileByType(tile.tileType)
            // backup tile config to restore on cancel
            this.editableTileBackup = clone(tile)
  if (this.editTileIsNew) {
                this.$delete(this.localValue, id)
            } else {
                this.editableTileBackup.isLoading = false
                // restore from backup
                this.$set(this.localValue, id, {
                    layout: this.localValue[id].layout,
                    tile: this.editableTileBackup,
                })
            }
   onTileEditComplete(){
            this.editableTile.isLoading = false
            this.editTileIsNew = null
            this.editableTile = null
            this.editableTileTemplate = null
}

И потом передаю значение лоадера в компонент где отображается сущности в которых, я вывожу этот лоадер если происходят действия (редактирование, сохранение):

<z-dashboard-tile
                        :title="tileForId(item.tileId).name"
                        :type="tileForId(item.tileId).tileType"
                        :config="tileForId(item.tileId).renderConfig"
                        :editable="true"
                        :isLoadingFirst="tileForId(item.tileId).isLoading" // loader value
                    >

Вопрос как реализовать лоадер не добавляя isLoading в модель объекта, что бы он был локальный и не расширял модель, помогите пожалуйста

Answer 1

[Михаил]

data: () => ({
  loadings: {}
}),

methods: {
  isLoading(tile) {
    return this.loadings[tile.id];
  }
}

Может вроде того?