динамически вызывать свойство объекта в цикле v-for

Question

поэтому я снова столкнулся с проблемой,

Я хочу создать компонент таблицы, в который вы можете отправить массив для компонента, и он будет отображать таблицу для вас

мы установилиэто вот так

<template>
<section class="container">
    <Apptable :search="true" :loader="true" title="User data" :data="users"/>
  </section>
</template>

<script>
import Apptable from "~/components/table.vue";
export default {
  components: {
    Apptable
  },
  data() {
    return {
      users: [
        {
          id: 1,
          name: "Lars",
          Adres: "hondenstraat 21",
          phone: "06555965"
        },
        {
          id: 1,
          name: "John",
          Adres: "verwelstraat 35",
          phone: "06555965"
        }
      ]
    };
  }
};
</script>

я посылаю данные компоненту и зацикливаю их оттуда вот так

<template>
  <section class="container">
    <h2 v-if="title">{{title}}</h2>
    <input v-if="search" class="search" placeholder="Search">
    <button v-if="loader" class="update" @click="dialog = true">Update</button>
    <table class="table">
      <thead>
        <tr class="tableheader">
          <th v-for="(item, index) in Object.keys(data[0])" :key="index">{{item}}</th>
        </tr>
      </thead>
      <tbody>
        <tr class="userdata" v-for="(item, index) in data" :key="index">
          <td v-for="(name, index) in Object.keys(data[index])" :key="index">{{//TODO: I WANT TO SELECT THE ITEM.DYNAMIC PROPERTY}}</td>
        </tr>
      </tbody>
    </table>
    <loader v-if="loader" :trigger="dialog"/>
  </section>
</template>

<script>
import loader from "~/components/loader.vue";

export default {
  components: {
    loader
  },
  data() {
    return {
      dialog: false
    };
  },
  watch: {
    dialog(val) {
      if (!val) return;
      setTimeout(() => (this.dialog = false), 1500);
    }
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: false,
      default: false
    },
    loader: {
      type: Boolean,
      required: false,
      default: false
    },
    search: {
      required: false,
      type: Boolean,
      default: true
    }
  }
};
</script>

, так что если вы посмотрите на таблицу.если бы я оставил задачу, если я вставлю {{item}} в место задачи.я получу это в моем столбце

введите описание изображения здесь

, но я хочу выбрать ключ объекта динамически.но если я положу {{item.name}} в текущее место, он не выберет ключ динамически.

, поэтому дело в том, что я хочу динамически вызывать свойство из объекта в v-for, такстолбцы получат данные в ячейках.

Answer 1

Вы должны использовать item[name] вместо item.name

<tbody>
  <tr class="userdata" v-for="(item, index) in data" :key="index">
    <td v-for="(name, nIndex) in Object.keys(data[index])" :key="nIndex">
      {{ item[name] }}
    </td>
  </tr>
</tbody>