Как вернуть данные внутри данных В Vue. js (Laravel6)

Question

У меня есть данные для counter1, а для counter 1 есть данные cashier1, подобные этой картинке:

это мой vue скрипт

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

Я хочу, чтобы мои данные кассира отображались, но я ничего не получаю. Я думаю, потому что данные кассира находятся под данными counter1. Как я могу получить эти данные?

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

Answer 1

Измените ваши элементы следующим образом:

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

Хотя, чтобы быть в безопасности, я бы использовал приведенное ниже, чтобы не выдавать ошибку, если counter1.cashier1 не существует:

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

Или вы можете использовать вычисляемое свойство:

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