значение не отображается и имеет ошибки в консоли для Vue. js (laravel6)

Question

У меня ошибка при отображении данных из 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>

И вот мой HTML для vue. js вывода данных:

<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>

Как я могу сделать так, чтобы, когда у меня были доступные данные, они отображались на странице, но если у меня нет данные. Он просто останется пустым и не будет ошибок.

Answer 1

Это произошло, когда ваша смонтированная функция сработала, но данные не закрылись. См. Vue жизненный цикл .

Что я делаю, чтобы решить эту проблему. Я беру погрузочный грузик. нравится.

<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')">

Думаю, это решит вашу проблему.

Answer 2

Вы столкнулись с этой ошибкой, потому что вы пытаетесь получить доступ к свойству undefined, так как queue изначально пусто и queue.cashier1, а все остальные свойства не определены. Итак, попробуйте это, добавив проверку, загружаются ли данные, и они не приводят к ошибкам при извлечении.

<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>