Javascript Vue.js数据表仅显示第一列中的数据

我正在尝试遍历一个对象，它是使用axios从数据库中提取的。我可以使对象显示在我的数据表中，但我无法使它将数据拆分为指定列

第一个代码段是父组件。实际列表i的tr和td分解为一个单独的组件，但这可能需要固定

<template>
<div class="container">
<router-link to="/add" class="btn btn-primary btn-sm float- 
right">AddClient</router-link>
<table class="table">
<thead class="thead-dark">
  <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th></th>
  </tr>
</thead> 
<client-info></client-info>      
</table>

</div>
</template>

<script>
import ClientInfo from '@/components/clientslistexperience/ClientInfo'


export default {
name: 'ClientsList',
components: {
ClientInfo
},
methods: {

},

}
</script>

enter code here

---

事实上，您需要删除

ClientInfo.vue

组件中的

div

根元素。 将

div

替换为

tbody

，即可解决您的问题；）

{{client.id}
{{client.name}
{{client.type}
{{client.email}
{{client.phone}

---

此处的完整演示>

您是否尝试过从

表的
标题中删除空表标题（
），因为您在表的标题部分定义了6列，但在表的正文中仅定义了5个单元格？请删除
div class=“client info”>
从上方
t车身
开始工作。你是我的英雄哈哈谢谢！只是出于好奇。我注意到您使用“const”，然后在之后导出新的Vue。这是一种更好的格式化代码的方法还是真的很重要？很高兴我帮助了你TJ！使用“const”是ES6+特性（在声明为const后不能重新分配值）。关于新Vue的导出以及整个应用程序结构，这是格式化代码和应用程序结构的更好方法。有关这方面的更多信息，请参阅官方Vuex指南；）如果答案解决了你的问题，别忘了投票确认答案。此外，它可能会帮助更多的人在未来！
<template>
<div class="client-info">
    <tbody>
        <tr v-for="(client, index) in clients"  v-bind:key="index"  
 :client="client">
            <th scope="row">{{ client.id }}</th>
            <td>{{ client.name }}</td>
            <td>{{ client.type }}</td>
            <td>{{ client.email }}</td>
            <td>{{ client.phone }}</td>
        </tr>
    </tbody>
</div>

  export default {
name: 'client-info',
props: {
    id: Array,
    type: String,
    name: String,
    email: String,
    phone: Number, 
},
computed: {
    ...mapState ([
        'clients'
    ])
},
created() {
this.$store.dispatch('retrieveClients')
}

}
</script>
enter code here

  import Vue from 'vue'
  import Vuex from 'vuex'
  import axios from 'axios'

   Vue.use(Vuex)
   axios.defaults.baseURL = 'http://client-api.test/api'

   export default new Vuex.Store({
   state: {
    clients: []
   },
   mutations: {
    retrieveClients(state, clients) {
      state.clients = clients
    },
   },
   actions: {
    retrieveClients(context) {
      axios.get('/clients')
      .then(response => {
        // console.log(response)
        context.commit('retrieveClients', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    }
    }
    })

<template>
      <tbody class="client-info">
        <tr v-for="(client, index) in clients"  
          :key="index">
              <td>{{ client.id }}</td>
              <td>{{ client.name }}</td>
              <td>{{ client.type }}</td>
              <td>{{ client.email }}</td>
              <td>{{ client.phone }}</td>
          </tr>
      </tbody>
</template>