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

Question

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>

Wesley Smith · Accepted Answer · 2020-02-21 20:26:43Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related