v-for 循环不适用于导入的数组

Question

我有 2 个文件，一个叫 clients.js，一个叫 clients.vue，我想导入数据并将其列在 clients.vue 文件的 table 中；但是导入的时候无法访问

如果我将数组移入 clients.vue 文件（因此无需导入），它工作正常。

我的代码看起来（简化）如下：

Clients.vue

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="client in clients">
          <td>{{ client.ClientName }}</td>
          <td>{{ client.ClientId }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

export default {};
</script>

还有我的clients.js文件：

export default {
  data () {
    return {
      clients: [
        {
          ClientName: 'testname1',
          ClientId: 1
        },
        {
          ClientName: 'testname2',
          ClientId: 2
        }
      ]
    }
  }
}

我知道可能 "activate" 以某种方式导入了数组，但我不知道如何。

Answer 1

您必须公开 component's 数据对象中定义的属性。

您已导入 clients 但未将其注入到 Clients.vue 的 data 中。

像这样更改 Clients.vue。

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

export default {
  ...clients
};

这会将 clients 注入 Client.vue。然后您可以在 Client.vue.

的模板中使用它

选择：

然而，就可读性而言，这不是一个好的模式。

最好在组件本身有一个属性，然后在mounted钩子中设置属性。

您可以通过以下方式进行：

<template>
  <div>
    <table>
      <tbody>
        <!-- use key when iterating -->
        <tr v-for="client in clients" :key="client.ClientId"> 
          <td>{{ client.ClientName }}</td>
          <td>{{ client.ClientId }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import clients from "./data/clients.js";
  export default {
    clients: [] // initial value
  },
  mounted () { // setting clients in mounted 
    this.clients = { ...clients } // use Vue.set if this is a deep nested object
  },
</script>

<style lang="scss" scoped></style>

混合方式

如果您打算将 clients.js 用作 mixin。

然后将脚本更改为：

<script>
import clients from "./data/clients.js";
export default {
  mixins: [clients],
}
</script>

v-for 循环不适用于导入的数组

v-for loop not working with imported array

vue.js

v-for

选择：

混合方式