CODEWITHSUNDEEP
javascripthtmllaravelvue.js
sigel
sigel

Reputation: 72

How to return a data inside the data In Vue.js (Laravel6)

I have a data for counter1 and counter 1 have a cashier1 data like this picture :

this picture.

this my vue script

<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter1:{},

        },
        mounted(){
            this.getQueue();
        },
        methods:{
            getQueue(){
                axios.get('api/display/showqueue')
                .then((response)=>{
                    this.counter1=response.data



                })
                .catch(function (error){
                    console.log(error);
                });
            }
        }

    })
</script>

I want my cashier data to display to this, But im getting nothing. I think its because the cashier data is under the counter1 data. How can I pull up that data?

<div class="col-sm-6">
                    <div id="app" class="card bg-gradient-lighter mt-3 shadow">
                        <div class="card-header-lg">
                        <h3 class="text-default text-uppercase">@{{counter1.department}}</h3>
                        </div>
                        <div class="card-body-sm">
                        <h1 class="display-1 font-weight-bold"><strong>@{{counter1.letter}}-@{{counter1.number}}</strong></h1>
                        </div>
                        <div class="card-footer-sm">
                          <p class="text-warning font-weight-bold">COUNTER 1</p>
                        </div>
                    </div>
                  </div>

Upvotes: 2

Views: 46

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19561

Change your elements like: 

<h3 class="text-default text-uppercase">@{{ counter1.cashier1.department }}</h3>

Though, to be safe, I'd use the below so it doesnt throw an error if counter1.cashier1 doesnt exist:

<h3 class="text-default text-uppercase">@{{ (counter1.cashier1 || {}).department}</h3>

Or, you could use a computed property:

<h3 class="text-default text-uppercase">@{{ department }}</h3>



<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter1:{},

        },
        mounted(){
            this.getQueue();
        },
        methods:{
            getQueue(){
                axios.get('api/display/showqueue')
                .then((response)=>{
                    this.counter1=response.data



                })
                .catch(function (error){
                    console.log(error);
                });
            }
        },
        computed: {
            department: function() {
                return (counter1.cashier1 || {}).department;
            }
        }

    })
</script>

Upvotes: 1

Related Questions