How can I display frontend results.The data is showing in the console.log but not in the frontend. I need help.

HTML

<b-card  header="Patient Information">
        
        <p>Name {{this.patientName}} </p>
     
        <br><br>
          <div >Medical Record</div>
   </b-card>

Script

import axios from "axios";

export default {
data():{},
methods: {
   getPatient(){
            
        axios.get('https://xxx/medicalRecord/api/v1/getMedicalRecord?patientID=s3333333c')
                    .then(response => {
                        this.patientName = response.data.message.patientName;
                        
                        console.log(response.data.message);
                    })
                    .catch(error => alert(error));
    
        }
}
}

CodePudding user response：

In your template, you don’t need the this. Change it to:

<p>Name {{ patientName }} </p>

But the problem is that you did not define patientName as an empty string in data. So there is no reactive property.

data(): {
    return {
        patientName: '',
    }
},

Hope this helps.

CodePudding user response：

Suggestions :

• Please verify response.data.message.patientName is returning the patient name or not.
• In Template, You can access data properties directly by their names with out using this keyword. (It will not break anything if you will use that with this keyword as well)
• To make the property reactive, You should add that in your data method.

Live Demo :

new Vue({
  el: '#app',
  data: {
    patientName: ''
  },
  mounted() {
    this.getPatientDetail();
  },
  methods: {
    getPatientDetail() {
      this.patientName =  'Alpha'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ this.patientName }}</p>
</div>