Vue.js（laravel6）的控制台中未显示值并出现错误
[英]value not displaying and having errors in console for Vue.js (laravel6)
问题描述
I'm having an error for displaying a data from vue.js This is the error.
我在显示来自 vue.js 的数据时出错这是错误。
this is the vue.js result这是 vue.js 的结果
I have a data in counter1 and the rest has no value yet.我在 counter1 中有一个数据，其余的还没有任何价值。 But I want it to display blank if it has no value yet and display the data that has value already.但是如果它还没有值，我希望它显示空白并显示已经有值的数据。
Here is my vue.js script:这是我的 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>
And here is my HTML for vue.js data output:这是我用于 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>
How can I make it that whenever I have a data available, It will display on the page but if I have no data.我怎样才能让它每当我有可用数据时，它会显示在页面上，但如果我没有数据。 It will just leave it blank and have no errors.它只会将其留空并且没有错误。
2 个解决方案
解决方案1
2 2020-02-22 07:59:14
This has happened when your mounted function is fired but data not exit.当您的挂载函数被触发但数据未退出时，就会发生这种情况。 See Vue life cycle . 请参阅 Vue 生命周期。
What I do to resolve this issue.我做什么来解决这个问题。 I take a loading flog.我采取加载鞭打。 like this.像这样。
<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>
now Html code现在的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>
you can do another thing to check your property is loaded at where loading condition is added.您可以做另一件事来检查您的属性是否在添加加载条件的位置加载。
<div class="col-sm-6" v-if="queue.hasOwnProperty('id')">
I think this will solve your issue.我认为这将解决您的问题。
解决方案2
1 已采纳 2020-02-22 10:43:31
You are facing this error because you are trying to access property of undefined as queue is empty initially and queue.cashier1 and all other properties are not defined.您正面临此错误，因为您试图访问undefined的属性，因为queue最初是空的，并且queue.cashier1和所有其他属性都没有定义。 So, try this by adding a check if data is loading and their is no error fetching result.因此，通过添加检查数据是否正在加载并且它们是否没有错误获取结果来尝试此操作。
<div id="app">
<div v-if="!isLoading && !isError" 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 && 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 && 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 && 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 && 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 && 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 && 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>
<div class="row" v-else>
<span v-if="isLoading">Loading...</span>
<span v-else>Error loading data...</span>
</div>
</div>
SCRIPT:脚本：
<script>
const app = new Vue({
el:'#app',
data:{
queue:{},
isLoading: false,
isError: false
},
mounted(){
this.getQueue();
},
methods:{
getQueue(){
this.isLoading = true;
this.isError = false
axios.get('api/display/showqueue')
.then((response)=>{
this.queue=response.data
this.isLoading = false
})
.catch(function (error){
console.log(error);
this.isLoading = false
this.isError = true
});
}
}
})
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 Vue.js (Laravel6) 中返回数据中的数据 - How to return a data inside the data In Vue.js (Laravel6)
Vue.js 在 Laravel - Vue.js in Laravel
如何从控制台修改 Vue.js 输入元素值 - How to modify Vue.js input element value from console
拉拉维尔 | 将 Vue.js 值传递给刀片中的数据值 - Laravel | Pass a Vue.js value to data-value in blade
Laravel / Vue.js-计时器 - Laravel/Vue.js - Timer
用vue.js和laravel查看 - view with vue.js and laravel
使用Vue.js的Laravel 5.7 - Laravel 5.7 with Vue.js
Laravel和Vue.js身份验证 - Laravel & Vue.js Authentication
Laravel 5.5 和 Vue.js - Laravel 5.5 and Vue.js
Laravel用vue.js回显 - Laravel echo with vue.js
相关标签