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

Question

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

这是我的 Axios 请求，包含 TH 元素和发送的 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>

在这里，我的 Table 组件

<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。姓名、电子邮件或网站等简单数据工作正常。

Answer 1

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

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

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

Answer 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>

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

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

Problem while using v-for. Props with dots do not show up

javascript

vue.js

vue-component

vuejs2

nuxt.js