vue.js - 创建钩子时出错：“TypeError：this.clients.forEach 不是函数”（Vue）

Question

我试图将每个客户的数据检索到他们自己的页面中（我遵循了指南）我不断收到相同的错误：“TypeError：this.clients.forEach 不是函数”。

我不知道如何使 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>

我的 routes.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>' } }
]

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

这是clients.js的样子：

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

//马蒂亚斯

标签： vue.jstypeerrorvue-router

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>