Vue-js call object with special id

Question

I'm a newbie in Vue-js and really need your help:

In my Django project I have 2 models: Patient and MedCard of this patient. They are connected with a Foreign Key. I want to implement such functionality: on page "Patients" I have list of patients, then when I push on someone's name I want to see his/her MedCard.

This is my code, but when I push on name I get all records for all patients from MedCard model:

Patients.vue:

<div v-for="patient in patients">
    <h3 @click="openMedCard(patient.id)">{{patient.surname}} {{patient.name}}</h3>
    <p>{{patient.birth_date}}</p>
</div>
<div
    <MedCard v-if="med_record.show" :id="med_record.id"></MedCard>
</div>

export default {
    name: 'Patient',
    components: {
        MedCard,
    },
    data() {
        return {
            patients: '',
            med_record: {
                  patient: '',
                  show: false,
                }
            }
        }

and methods from Patient.vue:

methods: {
openMedCard(id) {
    this.med_record.patient = id
    this.med_record.show = true
}

MedCard.vue:

<template>
<mu-row v-for="med_record in med_records">
    <h3>Doc – {{med_record.doc.surname}}{{med_record.doc.name}}</h3>
    <p>{{med_record.patient.surname}}</p>
    <p>{{med_record.record}}</p>
    <small>{{med_record.date}}</small>
</mu-row>
</template>

export default {
    name: 'MedCard',
    props: {
        id: '',
    },
    data() {
        return {
            med_records: '',
        }
    },
    methods: {
        loadMedCard() {
            $.ajax({
                url: "http://127.0.0.1:8000/api/v1/hospital/med_card/",
                type: "GET",
                data: {
                    id: this.id,
                    patient: this.patient
                },
                success: (response) => {
                    this.med_records = response.data.data
                }
            })
        }
    }
}

loadMedCard() gives me info from all MedCards in JSON like this:

{
    "data": {
        "data": [
            {
                "id": 1,
                "patient": {
                    "id": 1,
                    "surname": "KKK",
                    "name": "KKK",
                    "patronymic": "LLL",
                    "birth_date": "1999-07-07",
                    "sex": "F",
                    "phone": "no_phone",
                    "email": "no_email"
                },
                "doc": {
                    "id": 3,
                    "surname": "DDD",
                    "name": "DDD",
                    "patronymic": "DDD",
                    "education": "d",
                    "category": "2",
                    "sex": "m",
                    "phone": "no_phone",
                    "email": "no_email"
                },
                "record": "test text",
                "date": "2020-06-09"
            }...]

I'll be grateful for any help!

Answer 1

So the API returns you multiple patients's data while you're asking it for just one exact patient. There must be something wrong with the API with the filtering in first place. So you can filter your data on the client side, in your MedCard.vue component. First this component have to show data for one patient only, so the v-for="med_record in med_records" is not needed. Your med_records property can become just an object not an array:

data() {
        return {
            med_record: {},
        }
}

And in the success resolve method of your API call you can filter only the data you need and store it in med_record

success: (response) => {
                    this.med_records = response.data.data.find((patient)=> { return patient.id === this.id})
                }

If you want to store all the data in the med_records , then you can create computed property and apply the same filtering there.

I hope this helps.