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

user_12818578 0
Viewed 185

I have a problem with showing data in my table. When I tried to send props to my table component everything is ok, data from https://jsonplaceholder.typicode.com/users showing perfectly(e.g name, email) But if a data has an object in it(e.g company.name), the array does not display that element.

here is my Axios request, configList with TH elements and sent 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>

Here, my Table component

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

I don't know how to display the company.name and address.city. Simple data like name, email, or website working fine.

vuejs2 nuxt.js vue-component vue.js javascript
2 Answers

It's because of dot in property name.

If you want to display it, try this:

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

As you want to access the property dynamically from the config list, I tweak the code a little bit to work the way you want.

I modified configList object and added "dataProp" and renamed "key to propKey", here are the new object:

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",
        }
      ]
    }

and then I modified your Table.vue component and it's just these lines:

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

It will work as per your need, and you can customize it too.

user_109850110
Related