value not displaying and having errors in console for Vue.js (laravel6)

Question

I'm having an error for displaying a data from vue.js This is the error.

this is the vue.js result

I have a data in counter1 and the rest has no value yet. 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:

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

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

It's beacuse of your v-if you have to properly handle it otherwise remove it . your v-if should be v-if="queue.cashier1 && queue.cashier1.department" — saravana
– saravana, Commented Feb 22, 2020 at 6:06
hi @saravana. I tried to change the v-if condition but its still not showing. — sigel
– sigel, Commented Feb 22, 2020 at 6:16
You need to handle every if condition's v-if="queue.cashier1 && queue.cashier1.department" v-if="queue.cashier2 && queue.cashier2.department" v-if="queue.accounting1 && queue.accounting1.department" ..... and so on — saravana
– saravana, Commented Feb 22, 2020 at 6:27
the error here is you are trying to access a property from null or undefined value. suppose you have an object like below obj = {prop1:{color:red}} case 1 :: obj.prop1.color // red case 2 :: obj.prop1.color2 // undefined since prop1 not having color2 property case 3 :: obj.prop2.color // it will throw an error obj.prop2 will return undefined if you try to access something from undefined , you will get an error. — saravana
– saravana, Commented Feb 22, 2020 at 6:30

tony19 · Accepted Answer · 2022-07-15 22:54:42Z

This has happened when your mounted function is fired but data not exit. See Vue life cycle.

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

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

Sorry.Where will I put this code? div class="col-sm-6" v-if="queue.hasOwnProperty('id')">

Nipun Jain · Accepted Answer · 2020-02-22 15:57:30Z

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

This is working but after the data load.the design of my page destroyed I dont know why.
@sigel Just try removing class row from #app and give on divs. I have changed my answer please check if it works

Collectives™ on Stack Overflow

value not displaying and having errors in console for Vue.js (laravel6)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related