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}}放在待办事项中，是否离开了待办事项。我会在我的专栏中得到

enter image description here

但是我想动态选择对象的键。但是如果我将{{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>

在v-for循环中动态调用对象属性

1 个答案: