I am using Vue.js combined with Java and JDBC to create a web application. My schema is structured like so:
CREATE TABLE Person(
person_ID serial not null unique,
email text not null unique,
password text not null,
first_name text not null,
last_name text not null,
phone text,
mobile text,
industry text,
bio text,
active boolean default true,
city text,
find_out text,
role text not null,
notes text,
profile_photo bytea,
PRIMARY KEY (person_ID)
);
CREATE TABLE Mentor (
mentor_ID serial unique,
email text not null unique,
career_history text not null,
preferred_communication text not null,
mentoring_preference text not null,
linked_in text,
capacity int not null,
feedback_rating int,
feeback_comment text,
PRIMARY KEY (mentor_ID),
CONSTRAINT fk_person FOREIGN KEY (email) REFERENCES Person(email)
);
On one page, I want to display the details of a Mentor, and their given details from Person as well, for e.g I want to show First_name from person as well as career_history from Mentor on table.
The code for my vue controller is
"use strict";
var registerMentorApi = '//localhost:8072/api/register/mentor';
var mentorApi ='/api/mentors';
var personApi = '/api/user'
const app = Vue.createApp({
data() {
return {
// models (comma separated key/value pairs)
mentor: new Object(),
mentors: new Array(),
persons: new Array(),
signInMessage: "Please sign in to continue."
};
},
mounted(){
this.getMentors();
},
methods: {
// comma separated function declarations
registerMentor() {
// send POST request to service to create mentee
axios.post(registerMentorApi, this.mentor)
.then(() => {
window.location = 'registermentor.html';
})
.catch(error => {
console.error(error);
alert("An error occurred - check the console for details.");
});
},
getMentors(){
axios.get(mentorApi)
.then(response =>{
this.mentors = response.data;
})
.catch(error =>{
console.error(error);
alert("An error occured - check the console for details");
});
axios.get(personApi)
.then(response =>{
this.persons = response.data;
})
.catch(error =>{
console.error(error);
alert("An error occured - check the console for details");
});
}
}
});
// other component imports go here
// import data store
import { dataStore } from './data-store.js'
app.use(dataStore);
// mount the page - this needs to be the last line in the file
app.mount("main");
and my HTML code for the table is
<table>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name </th>
<th>Phone Number</th>
<th>Email </th>
</tr>
</thead>
<tbody>
<tr v-for="mentor in mentors">
<tr v-for="person in persons">
<td>{{mentor.mentorID}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
<td>{{person.phone}}</td>
<td>{{person.email}}</td>
</tr>
</tr>
</tbody>
</table>
This currently shows only all of the data from Person, and none from mentor, how can I make it so it will show the data from both person and mentor for a given person on the same line?
Note: The arrays for persons and mentors will contain mentor and person objects each with the values specified in the schema