如何在Vue.js（Laravel 6）中的数据中返回数据答案

【问题标题】：How to return a data inside the data In Vue.js (Laravel6)如何在Vue.js（Laravel 6）中的数据中返回数据
【发布时间】：2020-06-06 06:52:21
【问题描述】：

我有一个柜台 1 的数据，柜台 1 有一个收银员 1 的数据，如下图：

这是我的 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>

【问题讨论】：

标签： javascript html laravel vue.js

【解决方案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>

【讨论】：