具有特殊ID的Vue-js调用对象

问题描述 投票:0回答:1

我是Vue-js的新手,真的需要您的帮助:

在我的Django项目中,我有2个模型:Patient和该患者的MedCard。它们与外键连接。我想实现这样的功能:在“患者”页面上,我列出了患者列表,然后当我按某人的名字时,我想查看他/她的MedCard。

这是我的代码,但是当我输入姓名时,会从MedCard模型中获得所有患者的所有记录:

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,
                }
            }
        }

和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()会向我提供JSON中所有MedCard的信息,如下所示:

{
    "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"
            }...]

我将不胜感激!

javascript vue.js
1个回答
0
投票

因此,当您只要求一个确切的患者时,API会返回您多个患者的数据。首先使用过滤的API一定有问题。因此,您可以在客户端的MedCard.vue组件中过滤数据。首先,该组件必须仅显示一名患者的数据,因此不需要v-for="med_record in med_records"。您的med_records属性可以只是一个对象而不是数组:

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

并且在API调用的成功解决方法中,您只能过滤所需的数据并将其存储在med_record中>

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

如果要将所有数据存储在med_records中,则可以创建计算属性并在其中应用相同的过滤。

我希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.