我想让第二个复选框始终默认选中，即使在页面重新加载像图像-
用户可以稍后选择其他复选框，但默认情况下，第二个复选框应始终选中。
这里是复选框代码-
<template>
<div>
<div class="tw-flex tw-flex-wrap">
<div class="tw-w-full lg:tw-w-1/4">
<collabmed-loading v-if="!initialised">Loading Patient Info...</collabmed-loading>
<reception-patient-info
class="tw-px-0 tw-pt-0"
v-else
:patient-id="admissionRequest.patient_id"
>
</reception-patient-info>
</div>
<div class="tw-w-full lg:tw-w-3/4 lg:tw-pl-5">
<acemed-card>
<acemed-title>
Check In Details
<template #right>
<div v-if="initialised" class="tw-text-lg tw-text-gray-800"><strong>Admission Type:</strong> {{ admissionRequest.admission_type_name }}</div>
</template>
</acemed-title>
<div>
<collabmed-loading v-if="!initialised"></collabmed-loading>
<div v-else>
<div class="tw-flex tw-flex-wrap">
<div class="tw-w-full lg:tw-w-1/2">
<div class="tw-flex tw-flex-wrap tw-justify-between">
<div>
<v-tooltip bottom v-if="msetting('inpatient.inpatient_no_prefix')">
<v-btn flat style="min-width: 50px" slot="activator" class="pull-right pt-3">
{{ msetting('inpatient.inpatient_no_prefix') }}-
</v-btn>
<span>IP Number Prefix</span>
</v-tooltip>
</div>
<div>
<v-text-field
v-model="obj.admission.inpatient_no"
class="mr-2"
label="IP Number"
hint="Possible Format: #######/YY"
></v-text-field>
</div>
<div>
<v-tooltip bottom>
<v-btn
color="primary"
style="min-width: 50px"
slot="activator"
@click="generateIpNumber()"
:loading="generating"
>
<v-icon small>mdi-cached</v-icon>
</v-btn>
<span>Generate IP Number</span>
</v-tooltip>
</div>
</div>
</div>
<div class="tw-w-full tw-pt-5 lg:tw-pt-0 lg:tw-w-1/2 lg:tw-pl-5">
<collabmed-date-time-picker
label="Admission Date"
outline
:maxDate="today"
@input="setAdmissionDate"
></collabmed-date-time-picker>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<div v-if="! obj.admission.external_doctor">
<div v-if="! obj.admission.doctor_id">
<users-search
:roles-like="['doc']"
:label="'Admission Doctor'"
@results="setDoctor"
></users-search>
</div>
<p v-else class="pt-3 pl-3 border-bottom subheading">Doctor:</p>
</div>
<p v-else class="pt-3 pl-3 border-bottom subheading">External Doctor:</p>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<div v-if="obj.admission.doctor_id">
<p class="pt-3 pl-3 border-bottom subheading">
{{ obj.admission.doctor_name }}
<v-btn small color="red" icon dark @click="unsetDoctor()">
<v-icon small>delete</v-icon>
</v-btn>
</p>
</div>
<div v-else>
<v-text-field
v-model="obj.admission.external_doctor"
class="mx-2"
label="External Doctor"
hide-details clearable
></v-text-field>
</div>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-autocomplete
v-model="obj.admission.ward_id"
:items="wards"
@change="updateBeds()"
item-text="name"
item-value="id"
label="Select a Ward"
hide-details
outline
></v-autocomplete>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<div v-if="wardCashCharge" class="pl-3">
<p class="font-weight-bold title">Ward Charges</p>
<p>Cash Charge: <strong>{{ wardCashCharge | numberFormat }}</strong></p>
<p>Insurance Charge: <strong>{{ wardInsuranceCharge | numberFormat }}</strong></p>
</div>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-autocomplete
v-model="obj.admission.bed_id"
:disabled="! obj.admission.ward_id"
:items="beds"
item-text="name"
item-value="id"
label="Select a Bed"
hide-details
outline
></v-autocomplete>
<p v-if="overbookingAllowed"><em>Over-booking of beds has been allowed in the system</em></p>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<v-autocomplete
v-model="obj.admission.charges"
:disabled="! obj.admission.ward_id"
:items="charges"
item-text="name"
item-value="id"
label="Select Other Charge(s)"
class="ml-2"
hide-details multiple
outline chips
></v-autocomplete>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-alert :value="true" v-if="errors.any()" type="error" outline>
<div v-html="errors.display()"></div>
</v-alert>
</div>
<div class="tw-w-full tw-pt-5">
<v-btn block dark color="primary" class="mt-4" :loading="saveLoader" @click="save()">
Admit Patient
<v-icon class="pl-2">arrow_right_alt</v-icon>
</v-btn>
</div>
</div>
</div>
</div>
</acemed-card>
</div>
</div>
</div>
</template>
export default {
props: {
admissionRequestId: {
required: true,
}
},
data() {
return {
admissionRequestObj: new AdmissionRequest(),
obj: new Admission(),
wards: null,
saveLoader: false,
beds: [],
charges: [],
wardCashCharge: null,
wardInsuranceCharge: null,
today: moment(new Date()).format('YYYY-MM-DD HH:MM:ss'),
overbookingAllowed: false,
generating: false,
}
},
computed: {
...mapGetters([
'getWards',
]),
admissionRequest() {
return this.admissionRequestObj.selected
},
initialised() {
return this.wards && this.admissionRequest
},
saved() {
return this.obj.saved
},
submitted() {
return this.obj.form.submitted
},
contaminated() {
return this.obj.form.errorDetected;
},
errors() {
return this.obj.form.errors;
},
generatedIpNuber() {
return this.obj.generatedIpNuber
}
},
watch: {
contaminated(val) {
if(val) {
this.saveLoader = false
}
},
submitted(val) {
if(val) {
this.saveLoader = false
}
},
saved(val) {
if(val) {
this.saveLoader = false
this.dialog = false
window.location = route('inpatient.admissions.index').relative()
}
},
admissionRequest(val) {
if(val) {
this.obj.admission.admission_request_id = val.id
this.obj.admission.visit_id = val.visit_id
this.obj.admission.inpatient_no = val.visit.patient.inpatient_no
this.obj.admission.patient_id = val.visit.patient.id
}
},
getWards(val) {
if(val) {
this.wards = this.getWards.data
}
},
generatedIpNuber(val) {
this.generating = false
if(val)
this.obj.admission.inpatient_no = val
}
},
methods: {
...mapActions([
'setWards',
]),
initialise() {
this.admissionRequestObj.find(this.admissionRequestId)
this.setWards()
this.obj.admission.admission_date = this.today
this.overbookingAllowed = this.$options.methods.msetting('inpatient.allow_overbooking_of_wards') == 1
},
updateBeds() {
let ward = _.find(this.wards, {id: this.obj.admission.ward_id})
this.wardCashCharge = ward.cash_cost
this.wardInsuranceCharge = ward.insurance_cost
this.beds = _.map(ward.beds, item => {
let name = "Bed No. " + item.number
! item.is_available ? name += " (Unavailable)" : '';
let disabled = ! item.is_available
this.overbookingAllowed ? disabled = false : null
return {
name: name,
id: item.id,
disabled: disabled
}
})
let firstAvailableBed = _.find(this.beds, { disabled: false })
firstAvailableBed ? this.obj.admission.bed_id = firstAvailableBed.id : null
if(this.charges && this.charges.length && this.charges.length >=2) {
// charges[1] = second item
this.obj.admission.charges.push(this.charges[1].id)
}
this.charges = _.map(ward.charges, item => {
let name = item.name + " - Kshs. " + item.cost;
item.type == 'recurring' ? name += " [RECURRING]" : '';
return {
id: item.id,
name: name
}
})
},
setDoctor(doctor) {
this.obj.admission.doctor_id = doctor.id
this.obj.admission.doctor_name = doctor.full_name
},
unsetDoctor() {
this.obj.admission.doctor_id = null
this.obj.admission.doctor_name = null
},
generateIpNumber() {
this.generating = true
this.obj.generateInpatientNumber()
},
setAdmissionDate(datetime) {
this.obj.admission.admission_date = datetime
},
save() {
this.saveLoader = true
this.obj.save()
}
},
mounted() {
this.initialise()
}
}
</script>
<style scoped lang="scss">
</style>API数据看起来像-
当我选择bed时，我调用了一个方法来获取charges，我在那里放置了选择入场费的代码，第二个charge项目应该总是被选择的。
1条答案
按热度按时间3npbholx1#
如果你只想让第二个项目保持默认选中状态，那么在挂载的钩子上，只需在
charges数组中找到第二个项目的id，然后将这个id推送到v-model变量（obj.admission.charges），你应该会看到第二个项目总是被选中的。这里是演示-
**注意-**我在Vue的data属性中使用了你的API数据，因为我不能向你的服务器发送请求。我还假设了
obj.admission的可能结构，因为你没有提到它。