Marcas index Component

marcas-index.hbs

<div>
  <h4>Criar nova marca</h4>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <LinkTo @route="marcas/new" class="btn btn-success">Nova marca</LinkTo>
    </div>
  </div>
</div>
<table class="table table-stripped">
  <thead>
    <th>ID</th>
    <th>Nome</th>
    <th>Descrição</th>
    <th colspan="2"></th>
  </thead>
  <tbody>
    {{#each this.marcas as |marca|}}
      <tr>
        <td>{{marca.id}}</td>
        <td>{{marca.nome}}</td>
        <td>{{marca.descricao}}</td>
        <td>
          <LinkTo @route="marcas/edit" @model={{marca}} class="btn btn-primary">Editar</LinkTo>
          <button type="submit" class="btn btn-primary" {{on "click" (fn this.deleteMarca marca)}}>Excluir</button>
        </td>
      </tr>
    {{else}}
      <tr><td collspan="5">{{this.loading}}</td></tr>
    {{/each}}
  </tbody>
</table>

marcas-index.js

import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

export default class MarcasIndexComponent extends Component {
  @service store;
  @tracked errors;
  @tracked loading='Carregando...';
  @tracked marcas;

  constructor(owner, args) {
    super(owner, args);
    this.store.findAll('marca').then( (marcas) => {
      this.marcas = marcas;
    }, (errors) => {
      this.loading = 'Falha no carregamento!';
      this.errors = errors;
    });
  }

  @action
  deleteMarca(marca) {
    marca.destroyRecord();
  }
}