在子组件VueJS中循环遍历对象时将对象解析为道具

Question

我有一个表组件，我想让它可重复使用。 Table 组件接收一个对象数组，并使用 v-for 指令循环遍历它们。 Table 组件如下所示：

<template>
    <table>

      <thead>
       <tr>
        <th v-for="header in tableHeaders">{{ header }}</th>
       </tr>
      </thead>

      <tbody>
       <tr v-for="elements in tableData">
        <td>{{ elements }}</td>
       </tr>
      </tbody>

    </table>
</template>

<script>

export default {
  name: "Table",
  props: {
    tableData: Array,
    tableHeaders: Array,
    header: String
  },
}
</script>

然后我想在父组件中重用它并解析 tableData 是一个对象数组。 这工作正常，但我找不到访问属性的方法。 相反，我在每个 td 元素中得到了整个 object 。 父组件如下所示：

<template>
    <Table title="All users in the community" :table-data="users" :table-headers="headers"/> 
</template>


<script>
import Table from "@/components/Table";

export default {
  components: {
    Table
  },
  data() {
    return {
      users: [{name: "firstName", email: "firstEmail"}, {name: "secoundName", email: "secoundEmail"}], 
      headers: ["Name", "Email"],
    };
  },
};
</script>

我尝试以不同的方式绑定它，并且现在知道“元素”绑定，原因解析整个 object。

所以我的问题是，如何访问父组件中的 users.name ？ 我对 VueJS 还是有点陌生。 先感谢您。

Answer 1

您可以在标题中将属性名称作为键传递，然后 map 基于该键的元素：

headers: [{label:"Name",key:"name"},{label: "Email",key:"email"}],

表格组件：

   <table>

      <thead>
       <tr>
        <th v-for="header in tableHeaders">{{ header.label }}</th>
       </tr>
      </thead>

      <tbody>
       <tr v-for="elements in tableData">
        <td v-for="header in tableHeaders">{{elements[header.key]}}</td>
       </tr>
      </tbody>

    </table>

Answer 2

您可以在父组件中使用计算属性，例如对于用户：

computed: {
  tableUsers() {
    return this.users.map(user => user.name);
  }
}

然后在组件的 props 中使用它：

<Table title="All users in the community" :table-data="tableUsers" :table-headers="headers"/>