As a newcomer to Vue.js, I appreciate your patience. In my Vue project, I am focusing on displaying Patients and their data without utilizing Vuex.
The project consists of 3 layers:
1. Home.vue file where the patient data is imported.
2. Patients.vue component which contains a for loop to display all patients using props to access the patient Array.
3. ViewPatient.vue view where I aim to show more details of the selected Patient by inheriting the name and making an additional call to the endpoint for observations related to that specific patient.
I have experimented with different methods such as eventbus, dynamic router, and data-attributes.
Home.vue
<template>
<div class="container">
<keep-alive>
<Patients :PatientsData="PatientsData" />
</keep-alive>
</div>
</template>
<script>
// @ represents /src
import PatientsData from "../data/messages";
import Patients from "../components/Patients.vue";
export default {
name: "home",
data() {
return {
PatientsData: PatientsData
};
},
components: {
Patients
}
};
</script>
Patients.vue (component)
<template>
<div v-if="PatientsData.length > 0">
<div class="row row-eq-height">
<div v-for="PatientData in PatientsData" class="col-12 col-sm-6 col-md-3 mb-3" :key="PatientData.content" :data-id="PatientData.content" @click.prevent="passPatientData" >
<router-link to="/patient" >
<div class="col-12 patientsTiles p-4">
<p class="patientsName">
<span>Name:</span>
{{ PatientData.content }}
</p>
<p class="patientsCPR">
<span>CPR Number:</span>
{{ PatientData.subject }}
</p>
<p class="patientsAge">
<span>Age:</span>
{{PatientData.age}}
</p>
<i :class="['fa', 'fa-star', {important: PatientData.isImportant}]"></i>
</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
import router from "../main";
import { eventBus } from "../main";
export default {
props: {
PatientsData: Array,
},
data(){
return{
patientName: ""
}
},
methods: {
passPatientData() {
this.patientName = this.PatientData;
alert(this.patientName);
eventBus.$emit("passPatientData", this.patientName);
}
}
};
</script>
ViewPatient.vue (view)
<template>
<div class="container">
<h1>The Patient Detail</h1>
</div>
</template>
<script>
// @ represents /src
import { eventBus } from "../main";
export default {
props: {
// patientId:{
// type: String
// }
},
data() {
return {
selectedPatient : ""
};
},
created() {
eventBus.$on("passPatientData", data => {
this.selectedPatient = data;
})}
}
</script>
It seems the issue lies within the passPatientData function. The this.PatientData is empty, and I'm struggling to pass the clicked element's data to the empty string (this.patientName) so that it can be emitted to the eventbus.
passPatientData() {
this.patientName = this.PatientData;
alert(this.patientName);
eventBus.$emit("passPatientData", this.patientName);
}