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

Posted 2023-02-22

【中文标题】使用 v-for 时出现问题。带点的道具不显示

【英文标题】：Problem while using v-for. Props with dots do not show up

【发布时间】：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。姓名、电子邮件或网站等简单数据运行良好。

【参考方案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>

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