时间戳

首页 > 解决方案 > 具有特殊 id 的 Vue-js 调用对象

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

问题描述

我是 Vue-js 的新手，真的需要你的帮助：

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

这是我的代码，但是当我推送姓名时，我会从 MedCard 模型中获取所有患者的所有记录：

患者.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
}

医疗卡.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"
            }...]

我将不胜感激任何帮助！

标签： javascriptvue.js

解决方案

因此，当您只要求一位确切的患者时，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，则可以创建计算属性并在那里应用相同的过滤。

我希望这有帮助。

推荐阅读