I'm trying to call a get API to populate an array with details and show it in a table in vue.js but the console throws this error Here's the code that I have written, I am able to receive the results from console.log() and here are the results Can someone please explain why I still get this error ? P.S

Data is not being recognized in table in vuejs

I’m trying to call a get API to populate an array with details and show it in a table in vue.js but the console throws this error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "patient" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Here’s the code that I have written,

<template>
  <div>
    <table>
        <thead>
            <tr>
                <th>UID</th>
                <th>DATE</th>
            </tr>
        </thead>
        <tbody>
            <tr :for="patient in patients" :key="patient.uid">
                <td>{{patient.uid}}</td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name : 'ViewPrev',
    data() {
            return {
                user : {},
                patients : []
            }
        },
        mounted() {
            this.user = this.$store.getters.getCurrentUser;
            console.log('inside component',this.user.centerName,this.user.centerId,this.user.customerId);
            axios.get(`/${this.user.customerId}/${this.user.centerId}/patients`).then(({data,status}) => {
                console.log(data,status);
                data.patients.map((pat) => {
                    this.patients.push({
                        name : pat.centerName,
                        uid : pat.uid,
                        reportDetails : pat.reportDetails,
                    });
                })
                console.log('patients',this.patients);
            })
        }
};
</script>

<style lang="scss" scoped>
</style>

I am able to receive the results from console.log() and here are the results

(4) [{…}, {…}, {…}, {…}, __ob__: Observer]
0: {__ob__: Observer}
1: {__ob__: Observer}
2: {__ob__: Observer}
3:
name: "ssd"
reportDetails: Array(1)
0:
dates: "Tue Apr 13 2021 01:13:24 GMT+0530 (India Standard Time)"
reportLinks: "https://neos-bucket.s3.amazonaws.com/neos-bucket/NHT011/13-3-2021/report/NHT011-report.pdf"
_id: "6074a2dd74a2fd4320362340"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get dates: ƒ reactiveGetter()
set dates: ƒ reactiveSetter(newVal)
get reportLinks: ƒ reactiveGetter()
set reportLinks: ƒ reactiveSetter(newVal)
get _id: ƒ reactiveGetter()
set _id: ƒ reactiveSetter(newVal)
__proto__: Object
length: 1
__ob__: Observer {value: Array(1), dep: Dep, vmCount: 0}
__proto__: Array
uid: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get reportDetails: ƒ reactiveGetter()
set reportDetails: ƒ reactiveSetter(newVal)
get uid: ƒ reactiveGetter()
set uid: ƒ reactiveSetter(newVal)
__proto__: Object
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
__proto__: Array

Can someone please explain why I still get this error ? P.S I am calling this component inside another page called dashboard, I doubt that could be the problem but here’s the code for that if it helps

<template>
  <div>
    <div class="row">
      <div class="col-6">
        <div class="logo">
         
          <div class="d-grid gap-2 d-md-flex justify-content-md-start col-2">
            <button type="button" class="btn-sm">SETTINGS</button>
          </div>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start col-2">
            <button type="button" class="btn-sm">SIGN OUT</button>
          </div>
        </div>
      </div>
      <div class="col-6"> 
          <h4>NEOS HEALTHTECH</h4>
          <view-prev></view-prev>
      </div>
    </div>
  </div>
</template>

<script>
import ViewPrev from '../components/ViewPrev.vue';
export default {
  components: { ViewPrev},
};
</script>

<style lang="scss" scoped>
h4 {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-size: 35px;
  line-height: 40px;
  color: #ffffff;
  // display: flex;
  // align-items: center;
  text-align: right;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 1em;
}
</style>

Answer

There is a typo in your code, if you try v-for rather than :for, you should get the result you need.

In terms of the vue shorthand, it really is only v-bind: that can be abbreviated to :, definitely one to look out for in future!

Advertisement

Answer