【发布时间】：2021-10-12 09:31:28
【问题描述】：
我的应用中有 vue.js 组件。这是第一次在控制台中收到此消息。
显示3个框的图片是本地机器，它工作并显示用户信息。
下一张图片只显示了 3 个盒子中的 1 个，带有“示例”组件。
代码：
组件：
<template>
<div>
<loading-spinner v-if="!data_is_fetched"></loading-spinner>
<div v-else-if="data_is_fetched">
<!-- Modalbox -->
<div>
<div v-if="modalbox" @close="modalbox = false">
<edit-user-information-modal v-if="modalboxType === 1" @close="modalbox = false" @postSucces="fetchData()"
:student="record.user">
</edit-user-information-modal>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent justify-content-between d-flex align-text-center">
Min bruger
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<p><span class="font-weight-bold">Navn:</span></p>
<p><span class="font-weight-bold">Fødselsdato:</span></p>
<p><span class="font-weight-bold">Email:</span></p>
<p><span class="font-weight-bold">Telefonnummer:</span></p>
<p><span class="font-weight-bold">Brugertype:</span></p>
<p><span class="font-weight-bold">Vejnavn & husnummer:</span></p>
<p><span class="font-weight-bold">Postnummer og by:</span></p>
<p><span class="font-weight-bold">Land:</span></p>
</div>
<div class="col-6">
<p>
<span v-if="record.user.name">{{ record.user.name }}</span>
<span v-else class="font-italic">Intet navn</span>
</p>
<p>
<span v-if="record.user.birthday">{{ record.user.birthday }}</span>
<span v-else class="font-italic">Ingen fødselsdato</span>
</p>
<p>
<span v-if="record.user.email">{{ record.user.email }}</span>
<span v-else class="font-italic">Ingen email</span>
</p>
<p>
<span v-if="record.user.phone">{{ record.user.phone }}</span>
<span v-else class="font-italic">Intet telefonnummer</span>
</p>
<p>
<span v-if="record.user.role_id = 1">Elev</span>
<span v-else-if="record.user.role_id = 2">Kørelærer</span>
<span v-else-if="record.user.role_id = 3">Køreskoleadministrator</span>
<span v-else-if="record.user.role_id = 4">MitKørekort - Support</span>
<span v-else-if="record.user.role_id = 5">MitKørekort - Superbruger</span>
</p>
<p>
<span v-if="record.user.address_1">{{ record.user.address_1 }}</span>
<span v-else class="font-italic">Ingen addresse</span>
</p>
<p>
<span v-if="record.user.zip_code">{{ record.user.zip_code }}</span>
<span v-else class="font-italic">Intet postnummer</span>
</p>
<p>
<span v-if="record.user.country">{{ record.user.country }}</span>
<span v-else class="font-italic">Intet land</span>
</p>
</div>
</div>
<button class="btn btn-primary" @click="modalbox = true; modalboxType = 1">Rediger</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent">Ny adgangskode?</div>
<div class="card-body text-center">
<a class="mt-2 btn btn-primary btn-block" href="/nulstil/kodeord">Nulstil min adgangskode</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FormMixin from '../../FormMixin.js';
export default {
mixins: [ FormMixin ],
data() {
return {
record: {},
fetchUrl: 'v1/account/fetch',
data_is_fetched: false,
modalbox: false,
modalboxType: 0,
}
},
mounted() {
console.log('Component mounted.')
this.fetchData()
},
methods: {
fetchData() {
axios.get(this.fetchUrl)
.then(response => (
this.record = response.data
))
.finally( this.data_is_fetched = true)
},
},
}
</script>
组件注册
// Account
// Profile page
Vue.component('page-show-account', require('./pages/account/Show.vue').default);
【问题讨论】：
-
您的生产版本可能由于 javascript 错误而失败。