javascript - 值未显示且Vue.js控制台中出现错误(laravel6)-6ren

javascript - 值未显示且Vue.js控制台中出现错误(laravel6)

转载作者：行者123 更新时间：2023-12-03 06:45:53

我在显示vue.js中的数据时出错
这是错误。

这是vue.js结果

我在counter1中有一个数据，其余的都没有任何值。
但是我希望它在没有值的情况下显示空白，并显示已经具有值的数据。

这是我的vue.js脚本:

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

这是我的vue.js数据输出的HTML:

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

如何确保只要有可用数据，它就会显示在页面上，但是如果我没有数据。它将保留为空白并且没有错误。

最佳答案

之所以遇到此错误，是因为您尝试访问undefined的属性，因为queue最初为空，并且queue.cashier1和所有其他属性未定义。因此，可以通过添加检查是否正在加载数据以及是否没有错误获取结果的方法来尝试此操作。

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

关于javascript - 值未显示且Vue.js控制台中出现错误(laravel6)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60349394/

文章推荐： vue.js - 如何将CodePen拆分为Webpacked组件？

eclipse - 运行 RCP 应用程序的 OSGi 控制台(不是主机 OSGi 控制台)
我需要检查在我的 RCP 应用程序中启动时是否加载了某些包。我知道有一个“主机 OSGi 控制台”可以显示 Eclipse IDE 中所有插件的状态，但我对这些不感兴趣。我执行了以下步骤来获取我的应
python - 让 'interact' 使用 IPython 控制台，而不是标准的 Python 控制台？
在 pdb/ipdb 调试中，有用的 interact 命令为我提供了一个功能齐全的交互式 Python 控制台。但是，这似乎始终是“标准”Python 控制台，即使我使用 ipdb 开始也是如此。
C# 控制台？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
控制台/终端模式菜单中的 Emacs
我搜索过但找不到答案:如何在运行 Emacs 时选择:文件、编辑、选项、缓冲区、工具、C++ 等下拉菜单在控制台模式下？不是终端菜单。不，F10 不是答案。最佳答案如果不是 F10，那么 M-x
c# - 如何每隔几秒截屏一次C#控制台
我正在制作一个每 20-40 秒截屏一次的 c# 控制台应用程序。我试过到处找，但所有其他示例都没有使用控制台这是我到目前为止所做的代码: using System; using System.D
terraform 控制台 - 如何获取模块属性值
尝试使用 terraform 控制台，新功能。我使用 tfstate 进入我的项目并运行“terraform 控制台”。我可以使用常规插值系统获取变量值、数据和资源。但是，模块很难破解，我无法正确
Django SQL 控制台
我正在尝试调试一段返回错误的 SQL。我不确定 django 或 mysql 是否处理错误，所以我想通过 django 控制台运行它。有办法设置吗？提前致谢。最佳答案 manage.py dbs
Java 控制台 JPanel
你好是否可以在 JPanel 中绘制 java 控制台返回的内容？你有教程可以遵循吗？谢谢开关最佳答案我不记得在哪里找到这个，但我已使用我称为 TextAreaOutputStream 的类将输出
Xcode 控制台，以编程方式清屏
我对 Xcode 甚至编程都有点陌生。在 Xcode 中，在我的代码中，如何显示控制台并清除屏幕？我知道我可以使用 Xcode 首选项来完成此操作，但我想以编程方式完成此操作。最佳答案这对我有
C# 控制台/服务器访问网站
我正在开发一个 C# 项目，我需要从没有 API 或 Web 服务的安全网站获取数据。我的计划是登录，访问我需要的页面，并解析 HTML 以获取记录到数据库所需的数据位。现在我正在使用控制台应用程序进
C 控制台 - 分隔不同的值
我是编程新手，正在尝试不同的在线事件以掌握它。我遇到了一个特定的问题，我想制作一个程序，用户输入一个值并打印一个特定的字符串。例如，当用户输入 0 时，将打印字符串“black”，输入 1 将打印字符
java - 如何创建终端/控制台
我想创建一个终端/控制台，用户可以在其中输入命令。我知道 java，但我是 xml 的新手，所以我想知道如何在文本下生成文本，如果它变得很长，它应该是可滚动的，这是一张图片: 这是我的 xml cpd
C++ 控制台 - 格式化输出
我有一个由随机生成的数字组成的 nxn 网格。我有一个标签显示 X 轴和 Y 轴的元素编号: 对于单个数字，它可以正确对齐，但是当网格大小增加时，标签会变得不成比例并且不会像这样对齐: 我想知道是否有
C++(控制台)构造函数和派生类
假设我创建了一个包含两个变量的结构。 struct mystruct{ public: string name; int age;}; class School :public mystruct{ p
带日志记录的 Python 控制台
我正在重写一个服务器程序，我想在其中添加一个简单的控制台输入。目前，它只是提供数据并为它所做的每一件事打印出一两行，作为任何观看/调试的人的描述性措施。我想要的是有一个始终位于底部的“粘性”输入栏
Linux 控制台 - 启动进程并等待完成
我必须编写启动另一个进程(GUI)的控制台应用程序。然后，使用其他应用程序或相同的选项，我必须能够停止子进程。此外，如果子进程从 GUI 关闭，则必须通知我执行最终任务(如果被杀死，则相同)。我认为
Linux 控制台/标准输出默认保存
我一直在尝试到处寻找以下问题的答案: Linux上的标准输出/控制台默认将内容保存到文件中吗？我不想保存内容或重定向输出(我已经知道这一点)，我只是想知道它是否已经通过 linux 中包含的某个默认
C 控制台 - 在同一行打印图案
我正在尝试不同的事件，因为我是初学者并且想了解更多。我正在尝试在我的代码所在的同一行打印一个图案: int main() { int numOfWiggles; int count;
C# 控制台 - 输入和删除数组
在我的一项小任务中，我被要求创建一个数组来存储从用户提供的输入中获取的姓名和地址，并且稍后能够从数组中删除姓名和地址。如果能帮助我理解如何实现这一目标，我们将不胜感激，谢谢。编辑 - 该数组将像地
Python 控制台 - 检查特定模块中定义的类或函数
如果您想在 Python shell 中查看特定模块中定义了哪些模块，一种选择是键入 dir(path.to.module)。不幸的是，这不仅列出了特定模块中定义的类或函数，还包括该模块导入的类或函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 值未显示且Vue.js控制台中出现错误(laravel6)