使用 v-for 时出现问题。带点的道具不显示答案

【问题标题】：Problem while using v-for. Props with dots do not show up使用 v-for 时出现问题。带点的道具不显示
【发布时间】：2021-06-12 04:14:07
【问题描述】：

我在表格中显示数据时遇到问题。当我尝试将道具发送到我的表格组件时，一切正常，来自https://jsonplaceholder.typicode.com/users 的数据显示完美（例如姓名、电子邮件）但是如果数据中有一个对象（例如 company.name），则数组不会显示该元素.

这是我的 Axios 请求，带有 TH 元素的 configList 和发送的 props

<template>
<section>
  <header>
    <h1></h1>
  </header>
  <main class="container">
    <Table :config="configList" :dataTable="usersList"/>
  </main>
</section>
</template>

<script>
import Table from "@/components/Table.vue"

export default {
  components: {
    Table
  },
  data() {
    return {
      usersList: null,
      configList: [
        {
          key: "name",
          name: "Imię i nazwisko",
        },
        {
          key: `email`,
          name: "E-mail",
        },
        {
          key: `company.name`,
          name: "Nazwa firmy",
        },
        {
          key: "address.city",
          name: "Miasto",
        },
        {
          key: "website",
          name: "Strona internetowa",
        }
      ]
    }
  },
  async mounted() {
    const users = await this.$axios.$get("https://jsonplaceholder.typicode.com/users")
    this.usersList = users
    console.log(users[0].address.city)
  }
}
</script>

这里，我的表格组件

<template>
  <table>
      <thead>
        <tr>
          <th v-for="(item, id) in config" :key="id">
            {{ item.name }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, id) in dataTable" :key="id">
          <td v-for="(item, id) in config" :key="id">
            {{ row[item.key] }}
          </td>
        </tr>
      </tbody>
    </table>
</template>

<script>
export default {
props: ["config", "dataTable"],
}
</script>

我不知道如何显示 company.name 和 address.city。姓名、电子邮件或网站等简单数据运行良好。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component nuxt.js

【解决方案1】：

这是因为属性名称中的点。

如果你想显示它，试试这个：

{{ item['company.name']}}

【讨论】：

但是我需要使用{{ row[item.key] }}，我需要根据configList动态渲染数据

【解决方案2】：

由于您想从配置列表中动态访问该属性，因此我稍微调整了代码以按照您想要的方式工作。

我修改了 configList 对象并添加了 "dataProp" 并重命名了 "key to propKey"，这里是新对象：

configList: [
        {
          propKey: "name",
          name: "Imię i nazwisko",
        },
        {
          propKey: `email`,
          name: "E-mail",
        },
        {
          dataKey: 'company',
          propKey: `name`,
          name: "Nazwa firmy",
        },
        {
          dataKey: 'address',
          propKey: "city",
          name: "Miasto",
        },
        {
          propKey: "website",
          name: "Strona internetowa",
        }
      ]
    }

然后我修改了您的 Table.vue 组件，它只是以下几行：

<tbody>
        <tr v-for="(row, id) in dataTable" :key="id">
          <td v-for="(item, id) in config" :key="id">
            {{ item.dataKey ? row[item.dataKey][item.propKey] : row[item.propKey] 
}}
          </td>
        </tr>
      </tbody>

它将根据您的需要工作，您也可以自定义它。

【讨论】：