在模板中运行html之前，如何在vue组件中运行condition？

Question

我的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标签。发生错误是因为没有这样的条件。我还在犯迷糊使条件

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

Answer 1

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

Answer 2

首先，您将访问模板中的数组作为对象。因此，如果它是一个数组，请使用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”数组。