当前位置: 首页 > 知识库问答 >
问题:

在模板中运行html之前,如何在vue组件中运行condition?

艾飞宇
2023-03-14

我的vue组件如下所示:

<template>
    <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
        ...
            <div class="modal-header">
                <h4 class="modal-title">{{order.number}}</h4>
            </div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                order: []
            }
        },
        watch: {
            orderDetail: {
                handler() {
                    this.order = this.orderDetail
                },
                immediate: true
            }
        },
    }
</script>

如果执行的代码,存在这样的错误:

[Vue warn]:呈现时出错:“TypeError:无法读取未定义的属性“number”

所以我需要在watch中设置一个条件。如果存在this.orderDetail,则在模板中运行html标签。发生错误是因为没有这样的条件。我还在犯迷糊使条件

我怎样才能解决这个问题?

共有2个答案

佟高澹
2023-03-14

从技术上讲,beForeUpdate钩子可以用于此目的。看看它:https://vuejs.org/v2/api/#beforeUpdate

闻人鸿文
2023-03-14

首先,您将访问模板中的数组作为对象。因此,如果它是一个数组,请使用v-for循环顺序数组,然后访问它。但是我不认为你会想要标题中的for循环。因此,公开一个返回订单数组的适当元素的计算属性,并在模板中使用该属性。

第二点,你的错误信息。根据Vue实例生命周期挂钩,在数据准备就绪后加载模板。但在您的情况下,监视程序在加载模板后启动。所以您得到了未定义的错误。您可以做两件事:

1:显示一个加载器,直到您的观察者触发并且您的订单数组具有适当的数据。然后可以使用方法从“orderDetails”数组中获取元素。

<template>
<div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
    ...           
        <div v-if="orderNumber" class="modal-header">
            <h4 class="modal-title">{{orderNumber}}</h4>
        </div>
        <!-- have some loader -->
        <div v-else class="loader" ></div>
    ...
</div>
</template>

<script>
export default {
    ...
    data() {
        return {
            order: [],
            orderNumber: null
        }
    },
    watch: {
        orderDetail: {
            handler() {
                this.order = this.orderDetail;                   
                this.orderNumber = this.getOrderNumber();
            },
            immediate: true
        }
    },
    methods: {
      getOrderNumber() {
        //process this.orderDetail to get the appropriate orderNumber
      }
    }
</script>

2:如果可能,请在触发模式之前准备好“orderDetails”数组。

 类似资料:
  • 如何在 PyCharm 中运行当前文件?我想要一个热键,它将使用项目默认的 python 解释器执行当前文件(无论是普通文件、暂存文件还是暂存缓冲区)。我不想创建自定义运行配置,而只需使用默认的 Python 配置启动即可。这样的事情可能吗?

  • 问题内容: 我正在编写一个Maven插件(Mojo),该插件需要在运行之前执行一组标准的其他插件执行。 是否有一种机制可以在插件中声明所有目标,所以我不必依靠用户在其POM中定义所有目标? 问题答案: 您可以通过定义自定义生命周期并在通过注释执行Mojo之前调用该生命周期来做到这一点。 在您的Mojo中,在Javadoc中声明要执行的生命周期: 然后在src / main / resources

  • 在Sublime文本中,我通过cmd运行文件,但在凌动中,它们通过Visual Studio 2019打开,我如何修复此问题?请帮助解决这个问题。

  • 我在android工作室构建我的项目,我在android工作室制作捆绑包。 该捆绑包有aap文件,我认为aap文件和apk是相同的,那么如何在android emulator中运行aap文件呢

  • 我的两门课是这样的: 和 我无法使用编译这两个文件,错误是: a、 java:4:找不到symbol symbol:B类位置:p.a类 B类B=新B(“哈哈”) ^ a.java:4:找不到符号 符号:B类 位置:p.a类 B类=新B(“哈哈”) ^ 2个错误 移除