Ошибка в созданном хуке: «Ошибка типа: this.clients.forEach не является функцией» (Vue)

Question

Я пытаюсь получить данные для каждого клиента на их собственной странице (я следовал руководству). Я получаю одну и ту же ошибку: «Ошибка типа: this.clients.forEach не является функцией».

I Не, как сделать this.clients.forEach в функции.

Мой ViewClient. vue выглядит так:

<template>
  <h1>{{ clients.ClientName }}</h1>
</template>

<script>
  import clients from './data/clients.js';

  export default {
    data() {
      return {
        clients: clients,
        client: null
      };
    },
    created() {
      let clientName = this.$route.params.clientName;
      this.client = this.getClient(clientName);
    },
    methods: {
      getClient(clientName) {
        let match = null;

        this.clients.forEach(function(client) {
          if (client.ClientName == clientName) {
            match = client;
          }
        });

        return match;
      }
    }
  }
</script>

И мои маршруты. js выглядит так:

import Dashboard from "./Dashboard";
import Clients from "./Clients";
import Projects from "./Projects";
import ViewClient from "./ViewClient";

export const routes = [
  { path: '', component: Dashboard },
  { path: '/clients', component: Clients },
  { path: '/clients/:clientName', name: 'viewClient',  component: ViewClient },
  { path: '/projects', component: Projects },
  { path: '*', component: { template: '<h1>Page not found!</h1>' } }
]

А клиенты. vue выглядят так:

<template>
  <div>
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
      <h1 class="h3 mb-0 text-gray-800">Clients</h1>
      <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fa fa-plus fa-sm text-white-50"></i> Create New Client</a>
    </div>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
      <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
            <tr>
              <th>Client</th>
              <th>Contact Person</th>
              <th>Phone</th>
              <th>Email</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
              <th>Client</th>
              <th>Contact Person</th>
              <th>Phone</th>
              <th>Email</th>
            </tr>
            </tfoot>
            <tbody>
            <tr v-for="client in clients" :key="client.ClientId">
              <td>{{ client.ClientName }}</td>
              <td>{{ client.ClientId }}</td>
              <td>--</td>
              <td>
                <router-link
                  :to="{ name: 'viewClient', params: { clientName: client.ClientName } }"
                  tag="button"
                  class="btn btn-primary">
                  <a>Open {{ client.ClientName }}</a>
                </router-link>
              </td>
            </tr>
            </tbody>
          </table>

          <hr>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import clients from './data/clients.js';

  export default {
    mixins: [clients],
  }
</script>

Вот как выглядят клиенты. js выглядит так:

export default {
  data () {
    return {
      clients: [
        {
          ClientName: 'Bo',
          ClientId: 1
        },
        {
          ClientName: 'John',
          ClientId: 2
        },
        {
          ClientName: 'Matt',
          ClientId: 3
        },
        {
          ClientName: 'Irene',
          ClientId: 4
        },
      ]
    }
  }
}

// Mathias

Answer 1

похоже this.clients не является массивом, просто проверьте, прежде чем использовать его следующим образом:

<template>
  <h1>{{ clients.ClientName }}</h1>
</template>

<script>
  import clients from './data/clients.js';

  export default {
    data() {
      return {
        clients: clients,
        client: null
      };
    },
    created() {
      let clientName = this.$route.params.clientName;
      this.client = this.getClient(clientName);
    },
    methods: {
      getClient(clientName) {
        let match = null;

        if(Array.isArray(this.clients) && this.clients.length>0){ // <-- Check to see if it's an array
          this.clients.forEach(function(client) {
            if (client.ClientName == clientName) {
              match = client;
            }
          });
        }

        return match;
      }
    }
  }
</script>