我是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"
}...]
我将不胜感激!
因此,当您只要求一个确切的患者时,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
中,则可以创建计算属性并在其中应用相同的过滤。
我希望这会有所帮助。