我在显示来自 vue.js 的数据时遇到错误 这是错误。
这是 vue.js 结果
我在 counter1 中有一个数据，其余的还没有值。 但我希望它在没有值的情况下显示空白，并显示已经有值(value)的数据。
这是我的 vue.js 脚本:
<script>
const app = new Vue({
el:'#app',
data:{
queue:{},
},
mounted(){
this.getQueue();
},
methods:{
getQueue(){
axios.get('api/display/showqueue')
.then((response)=>{
this.queue=response.data
})
.catch(function (error){
console.log(error);
});
}
}
})
</script>
这是我的 vue.js 数据输出的 HTML:
<div id="app" class="row">
<div class="col-sm-6">
<div class="card bg-gradient-lighter mt-3 shadow">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.cashier1.department">@{{ (queue.cashier1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.cashier1"><strong>@{{ (queue.cashier1 || {}).letter}}-@{{ (queue.cashier1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.cashier2.department">@{{ (queue.cashier2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.cashier2"><strong>@{{ (queue.cashier2 || {}).letter}}-@{{ (queue.cashier2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.accounting1.department">@{{ (queue.accounting1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.accounting1"><strong>@{{ (queue.accounting1 || {}).letter}}-@{{ (queue.accounting1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter mt-3 shadow">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.accounting2.department">@{{ (queue.accounting2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.accounting2"><strong>@{{ (queue.accounting2 || {}).letter}}-@{{ (queue.accounting2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.registrar1.department">@{{ (queue.registrar1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.registrar1"><strong>@{{ (queue.registrar1 || {}).letter}}-@{{ (queue.registrar1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.registrar2.department">@{{ (queue.registrar2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.registrar2"><strong>@{{ (queue.registrar2 || {}).letter}}-@{{ (queue.registrar2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
</div>
如何才能使每当我有可用数据时，它都会显示在页面上，但如果我没有数据。它只会将其留空并且没有错误。
最佳答案
当您安装的函数被触发但数据未退出时，就会发生这种情况。 See Vue life cycle .
我如何解决这个问题。我拿了一根装载鞭子。像这样。
<script>
const app = new Vue({
el:'#app',
data:{
queue:{},
loading: false,
},
mounted(){
this.getQueue();
},
methods:{
getQueue(){
this.loagind = true;
axios.get('api/display/showqueue')
.then((response)=>{
this.queue=response.data
this.loading = false
})
.catch(function (error){
console.log(error);
this.loading = false
});
}
}
})
</script>
现在的Html代码
<div id="app" class="row">
<div class="col-sm-6" v-if="!loading">
<div class="card bg-gradient-lighter mt-3 shadow">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.cashier1.department">@{{ (queue.cashier1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.cashier1"><strong>@{{ (queue.cashier1 || {}).letter}}-@{{ (queue.cashier1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.cashier2.department">@{{ (queue.cashier2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.cashier2"><strong>@{{ (queue.cashier2 || {}).letter}}-@{{ (queue.cashier2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.accounting1.department">@{{ (queue.accounting1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.accounting1"><strong>@{{ (queue.accounting1 || {}).letter}}-@{{ (queue.accounting1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter mt-3 shadow">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.accounting2.department">@{{ (queue.accounting2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.accounting2"><strong>@{{ (queue.accounting2 || {}).letter}}-@{{ (queue.accounting2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter shadow mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.registrar1.department">@{{ (queue.registrar1 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.registrar1"><strong>@{{ (queue.registrar1 || {}).letter}}-@{{ (queue.registrar1 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 1</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-gradient-lighter mt-3">
<div class="card-header-lg">
<h3 class="text-default text-uppercase" v-if="queue.registrar2.department">@{{ (queue.registrar2 || {}).department}}</h3>
<h3 class="text-default text-uppercase" v-else>-</h3>
</div>
<div class="card-body-sm">
<h1 class="display-1 font-weight-bold" v-if="queue.registrar2"><strong>@{{ (queue.registrar2 || {}).letter}}-@{{ (queue.registrar2 || {}).number}}</strong></h1>
</div>
<div class="card-footer-sm">
<p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
</div> <p class="text-warning font-weight-bold">COUNTER 2</p>
</div>
</div>
</div>
</div>
您可以做另一件事来检查您的属性是否已在添加加载条件的位置加载。
<div class="col-sm-6" v-if="queue.hasOwnProperty('id')">
我认为这会解决您的问题。
关于javascript - Vue.js (laravel 6) 的值未显示并在控制台中出现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60349394/