【发布时间】：2020-06-06 12:25:17
【问题描述】：
显示来自 vue.js 的数据时出错 这是错误。
这是 vue.js 的结果
我在 counter1 中有一个数据，其余的还没有值。 但是如果它还没有值，我希望它显示空白，并显示已经有值的数据。
这是我的 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>
我怎样才能让它每当我有可用数据时，它会显示在页面上，但如果我没有数据。它只会将其留空并且没有错误。
【问题讨论】：
-
这是因为你的 v-if 你必须妥善处理它，否则删除它。你的 v-if 应该是 v-if="queue.cashier1 && queue.cashier1.department"
-
嗨@saravana。我试图改变 v-if 条件，但它仍然没有显示。
-
你遇到的是同样的错误还是不同的错误
-
你需要处理每个 if 条件的 v-if="queue.cashier1 && queue.cashier1.department" v-if="queue.cashier2 && queue.cashier2.department" v-if=" queue.accounting1 && queue.accounting1.department" .....等等
-
这里的错误是您试图从 null 或未定义的值访问属性。假设你有一个像下面这样的对象 obj = {prop1:{color:red}} case 1 :: obj.prop1.color // red case 2 :: obj.prop1.color2 // undefined 因为 prop1 没有 color2 属性 case 3 :: obj.prop2.color // 会抛出错误 obj.prop2 会返回 undefined 如果你试图从 undefined 访问某些东西，你会得到一个错误。
标签： javascript php html laravel vue.js