Vue.js 데이터 테이블이 첫 번째 열에 데이터만 표시됨

Vue.js 데이터 테이블이 첫 번째 열에 데이터만 표시됨

데이터베이스에서 추출된 객체를 통해 반복하려고 합니다.개체를 데이터 테이블에 표시할 수 있지만 데이터를 지정된 열로 분할할 수 없습니다.

첫 번째 스니펫은 부모 컴포넌트입니다.실제 리스트의 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

다음은 표에 표시할 데이터를 통해 반복되는 구성요소입니다.

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

'vuex'에서 {mapState} 가져오기

  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

마지막은 axios 요구가 이루어지는 vuex 스토어입니다.작은 프로젝트를 위해 vuex를 사용하는 것은 오버킬이라는 것을 알고 있지만, 저는 이것이 좀 더 큰 것을 의도하고 있기 때문에 이 방법을 선택했습니다.어떤 도움도 대단할 거야!고마워요.

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

여기에 이미지 설명 입력

실제로 이 기능을 삭제해야 합니다.div루트 요소ClientInfo.vue요소.를 교환해 주세요.div타고tbody이것으로 문제가 해결됩니다.

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

자세한 데모는 이쪽 > https://codesandbox.io/s/v8vw0z89r7

언급URL : https://stackoverflow.com/questions/51682405/vue-js-data-table-only-showing-data-in-first-column